Awesome

@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 :heart:

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:

Demo
Components
Dependencies
Installation
API
Usage
Run Demo App Locally
Other Angular Libraries
Support
License

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/select-country

Library's components

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

Dependencies

Angular developed and tested with 17.x

Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics

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

2. Install via npm. (Alternative)

Install peer dependencies

npm i svg-country-flags -s

then update your angular.json like below (svg-country-flags)

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

Now install @angular-material-extensions/select-country via:

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

Import the library

If you installed the library via angular schematics, you can skip this step

Once installed you need to import the main module and the HttpClientModule:

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' --> MatSelectCountrySupportedLanguages
             HttpClientModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

in other modules

import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatSelectCountryModule, HttpClientModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application like for lazy loading import MatSelectCountryModule into your feature module:

API

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

option	bind	type	default	description
value	`Input()`	`Country`	-	the selected country (pass an empty Country object with alpha2 code populated to do alpha2 lookup)
appearance	`Input()`	`MatFormFieldAppearance`	-	Possible appearance styles for `mat-form-field` ('legacy', 'standard', 'fill' or 'outline')
countries	`Input()`	`Country[]`	All countries stored in the lib	Countries that should be loaded - predefine the countries that you only need!
label	`Input()`	`boolean`	-	`mat-form-field` label's text
itemsLoadSize	`Input()`	`number`	-	the number of countries that should be fetched --> improves the performance
placeHolder	`Input()`	`boolean`	-	input placeholder text
disabled	`Input()`	`boolean`	-	Whether the component is disabled
loading	`Input()`	`boolean`	-	Whether the component is loading
nullable	`Input()`	`boolean`	-	Whether the component is able to emit `null`
readonly	`Input()`	`boolean`	-	Whether the component is read only
tabIndex	`Input()`	`number \| string`	-	Whether the component can be focused, and where it participates in sequential keyboard navigation
showCallingCode	`Input()`	`boolean`	false	Whether the component to show the country's calling code in the label and selection
class	`Input()`	`string`	-	Class attribute apply style to input text or validation ignore (optional)
language	`Input()`	`string`	-	the language, if not specified MatSelectCountryModule.forRoot('XX') will be used (optional)
name	`Input()`	`string`	'country'	the attribute name of the input element
autocomplete	`Input()`	`string`	-	the attribute autocomplete of the input element, to avoid suggestion of some browsers put 'no'
onCountrySelected	`Output()`	`EventEmitter<Country>`	-	emits the selected country as object (see the interface below)

interface Country {
  name: string;
  alpha2Code: string;
  alpha3Code: string;
  numericCode: string;
  callingCode: string;
}

Usage

add the <mat-select-country> element to your template:

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

Use the library with reactive forms

option 1 with Reactive Forms

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

option 2 with Reactive Forms

<form [formGroup]="countryFormGroup">
    <div fxLayoutAlign="center">
      <mat-select-country appearance="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']
})
export class AppComponent implements OnInit{
  title = 'select-country';

  countryFormControl = new FormControl();
  countryFormGroup: FormGroup;

  constructor(private formBuilder: 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-country appearance="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'
  }
];

Result:

Improve performance - use the `itemsLoadSize` property

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

only 5 countries will fetched!

Change language dynamically - use the `language` property

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

Run Demo App Locally

Build the library

$ npm run build:lib

Serve the demo app

$ npm start

Other Angular Libraries

Who is using this library?

nahaus.de - Digital and Automated Real Estate Management

To put your project here, please drop an appropriate PR

Support

Drop an email to: Anthony Nahas
or open an appropriate issue
let us chat on Gitter

Built by and for developers :heart: we will help you :punch:

jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

License

Copyright (c) 2020-2024 Anthony Nahas. Licensed under the MIT License (MIT) <img alt="angular-material-extensions's logo" height="92px" width="92px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/badge_made-in-germany.svg">