@angular-material-extensions/select-country - Angular Material component that allow users to select a country or nationality with an autocomplete feature

Built by and for developers ❤️

Table of Contents

Demo

Installation

1. Install viang add. (Recommended)

ng add @angular-material-extensions/select-country

2. Install vianpm. (Alternative)

npm i svg-country-flags -s

"assets": ["src/favicon.ico","src/assets",              {"glob":"**/*","input":"./node_modules/svg-country-flags/svg","output":"src/assets/svg-country-flags/svg"              }            ],

npm install --save @angular-material-extensions/select-country

Import the library

import{MatSelectCountryModule}from"@angular-material-extensions/select-country";

import{MatSelectCountryModule}from'@angular-material-extensions/select-country';import{HttpClientModule}from'@angular/common/http';@NgModule({declarations:[AppComponent, ...],imports:[MatSelectCountryModule.forRoot('de'),// you can use 'br' | 'de' | 'en' | 'es' | 'fr' | 'hr' | 'hu' | 'it' | 'nl' | 'pt' --> MatSelectCountrySupportedLanguagesHttpClientModule, ...],bootstrap:[AppComponent]})exportclassAppModule{}

import{MatSelectCountryModule}from'@angular-material-extensions/select-country';import{HttpClientModule}from'@angular/common/http';@NgModule({declarations:[AppComponent, ...],imports:[MatSelectCountryModule,HttpClientModule, ...],bootstrap:[AppComponent]})exportclassAppModule{}

<mat-select-country> used to display the main component -see the demo examples

interfaceCountry{name:string;alpha2Code:string;alpha3Code:string;numericCode:string;callingCode:string;}

Usage

<mat-select-country></mat-select-country>

Use the library with reactive forms

option 1 with Reactive Forms

<mat-select-countryappearance="outline"label="Country"[formControl]="countryFormControl"(onCountrySelected)="onCountrySelected($event)"></mat-select-country>

option 2 with Reactive Forms

<form[formGroup]="countryFormGroup"><divfxLayoutAlign="center"><mat-select-countryappearance="outline"label="Country"class="className"formControlName="country"(onCountrySelected)="onCountrySelected($event)"></mat-select-country></div></form>

import{Component,OnInit}from'@angular/core';import{FormControl}from'@angular/forms';import{Country}from'@angular-material-extensions/select-country';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.scss']})exportclassAppComponentimplementsOnInit{title='select-country';countryFormControl=newFormControl();countryFormGroup:FormGroup;constructor(privateformBuilder:FormBuilder){angulartics2GoogleAnalytics.startTracking();}ngOnInit():void{this.countryFormGroup=this.formBuilder.group({country:[]});this.countryFormGroup.get('country').valueChanges.subscribe(country=>console.log('this.countryFormGroup.get("country").valueChanges',country));this.countryFormControl.valueChanges.subscribe(country=>console.log('this.countryFormControl.valueChanges',country));}onCountrySelected($event:Country){console.log($event);}}

Predefine your countries to load

<mat-select-countryappearance="outline"label="Country"[countries]="predefinedCountries"(onCountrySelected)="onCountrySelected($event)"></mat-select-country>

import{Country}from'@angular-material-extensions/select-country';predefinedCountries:Country[]=[{name:'Germany',alpha2Code:'DE',alpha3Code:'DEU',numericCode:'276',callingCode:'+49'},{name:'Greece',alpha2Code:'GR',alpha3Code:'GRC',numericCode:'300',callingCode:'+30'},{name:'France',alpha2Code:'FR',alpha3Code:'FRA',numericCode:'250',callingCode:'+33'},{name:'Belgium',alpha2Code:'BE',alpha3Code:'BEL',numericCode:'056',callingCode:'+32'}];

Improve performance - use theitemsLoadSize property

<mat-select-countryappearance="outline"label="Country"[itemsLoadSize]="5"></mat-select-country>

Change language dynamically - use thelanguage property

<mat-select-countryappearance="outline"label="Country"[language]="languageSelected"(onCountrySelected)="onCountrySelected($event)"></mat-select-country>

$ npm run build:lib

$ npm start

Other Angular Libraries