FormCountryCode

This library was generated with Angular CLI version 9.1.12. (Angular 9+) I can not guarantee it will work on versions lower than Angular 9 but if you wish to try, make sure your project has the following dependencies for your version of Angular;

• @angular/forms
• @angular/cdk
• @angular/material

Import

import { FormCountryCodeModule } from 'form-country-code';

@NgModule({
    imports: [
        FormCountryCodeModule, // added to imports
    ],
})
class YourModule {}

Usage

<form-country-code formControlName="country_code" (country)="countrySelected = $event" style="height: 36px; width: 50px;" [includePlus]="true">
    <!-- the width and height will determine the click area for the Country code Selection -->
    <!-- includePlus: whether the formControl will have the '+' included in the country code (does not effect the country event) -->

    {{countrySelected.name}} <!-- This will be what will be rendered inside the above mentioned click area -->
    <div class="flag" [innerHTML]="countrySelected.icon"></div>

</form-country-code>

The Form Country Code itself does not have any design, other than the dropdown for selecting the country, this means that you have full control on how to display the input by styling the form-country-code for the size of the input, and styling the flag to determine its size.

'country' Event

When a country is selected, country emits an object containing the properties; name (country name), dial_code (phone dial code), code (ISO 3166-1-alpha-2 code) and icon (SVG SafeHtml containing the flag).

Credits

The SVG flags utilized in this package are from https://github.com/lipis/flag-icon-css