Home

Awesome

<p align="center"> <img alt="angular-material-extensions's logo" height="256px" width="256px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/angular-material-extensions-logo.svg"> </p>

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

npm version npm demo docs: typedoc Join the chat at https://gitter.im/angular-material-extensions/Lobby Build Status codecov Greenkeeper Badge license

<p align="center"> <img alt="@angular-material-extensions/select-country demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/select-country.gif"> </p> <p align="center"> <img alt="@angular-material-extensions/select-country demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/select-country.png"> </p>

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:

Table of Contents

<a name="demo"/>

Demo

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

<a name="components"/>

Library's components


<a name="dependencies"/>

Dependencies


<a name="installation"/>

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:

<a name="api"/>

API

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

optionbindtypedefaultdescription
valueInput()Country-the selected country (pass an empty Country object with alpha2 code populated to do alpha2 lookup)
appearanceInput()MatFormFieldAppearance-Possible appearance styles for mat-form-field ('legacy', 'standard', 'fill' or 'outline')
countriesInput()Country[]All countries stored in the libCountries that should be loaded - predefine the countries that you only need!
labelInput()boolean-mat-form-field label's text
itemsLoadSizeInput()number-the number of countries that should be fetched --> improves the performance
placeHolderInput()boolean-input placeholder text
disabledInput()boolean-Whether the component is disabled
loadingInput()boolean-Whether the component is loading
nullableInput()boolean-Whether the component is able to emit null
readonlyInput()boolean-Whether the component is read only
tabIndexInput()number | string-Whether the component can be focused, and where it participates in sequential keyboard navigation
showCallingCodeInput()booleanfalseWhether the component to show the country's calling code in the label and selection
classInput()string-Class attribute apply style to input text or validation ignore (optional)
languageInput()string-the language, if not specified MatSelectCountryModule.forRoot('XX') will be used (optional)
nameInput()string'country'the attribute name of the input element
autocompleteInput()string-the attribute autocomplete of the input element, to avoid suggestion of some browsers put 'no'
onCountrySelectedOutput()EventEmitter<Country>-emits the selected country as object (see the interface below)
interface Country {
  name: string;
  alpha2Code: string;
  alpha3Code: string;
  numericCode: string;
  callingCode: string;
}
<a name="usage"/>

Usage

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

<mat-select-country>
</mat-select-country>
<p align="center"> <img alt="@angular-material-extensions/select-country demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example_full.png"> </p> <p align="center"> <img alt="@angular-material-extensions/select-country demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example3.png"> </p> <p align="center"> <img alt="@angular-material-extensions/select-country demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example2.png"> </p>

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:

<p align="center"> <img alt="@angular-material-extensions/select-country demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v2.1.0/predefined.png"> </p>

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>
<a name="run-demo-app-locally"/>

Run Demo App Locally

Build the library

$ npm run build:lib

Serve the demo app

$ npm start

Other Angular Libraries


<a name="who_is_using_this_lib"/>

Who is using this library?

nahaus.de - Digital and Automated Real Estate Management

To put your project here, please drop an appropriate PR


<a name="support"/>

Support

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


<a name="license"/>

License

Copyright (c) 2020-2024 Anthony Nahas. Licensed under the MIT License (MIT) <p align="center"> <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"> </p>