Nightly Perpetrated Mischief
    Wondering what’s next for npm?Check out our public roadmap! »

    @angular-material-extensions/select-country
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    angular-material-extensions's logo

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

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

    @angular-material-extensions/select-country demonstration

    @angular-material-extensions/select-country demonstration

    Built by and for developers ❤️

    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 and sharing it 📢

    Table of Contents

    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 9.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' | '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
    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)
    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>

    @angular-material-extensions/select-country demonstration

    @angular-material-extensions/select-country demonstration

    @angular-material-extensions/select-country demonstration

    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:

    @angular-material-extensions/select-country demonstration

    Improve performance - use the itemsLoadSize property

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

    only 5 countries will fetched!

    Run Demo App Locally

    Build the library

    $ npm run build:lib

    Serve the demo app

    $ npm start

    Other Angular Libraries


    Support

    Built by and for developers ❤️ we will help you 👊


    jetbrains logo

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


    License

    Copyright (c) 2020-2021 Anthony Nahas. Licensed under the MIT License (MIT)

    angular-material-extensions's logo

    Install

    npm i @angular-material-extensions/select-country

    DownloadsWeekly Downloads

    1,549

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    3.89 MB

    Total Files

    99

    Last publish

    Collaborators

    • avatar