Awesome

NGX Countries dropdown

Angular library with customizable countries dropdown component with the following features. It is not dependent on any css framework.

Features

• To create a country dropdown with flags
• Searchable country dropdown
• Use as dial code dropdown
• Use as currency dropdown
• Use as language dropdown
• To create a country dropdown with capitals
• Capability to display preferred countries on top and separate section
• Capability to display only specific countries
• Capability to block specific countries

Demo

Access all features <a href="https://kapilkumar0037.github.io/ngx-countries-dropdown-demo">demo here</a>.

Getting started

Hope you already have an angular project, if not please create one using the below commands

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open

1. once the angular application setup is ready, install the Ngx Countries dropdown using the following command

Version mapping

npm i ngx-countries-dropdown

2. Add the CSS Either import the CSS directly to styles.scss file

   @import  "node_modules/ngx-countries-dropdown/assets/styles.css";
   

   Or, add CSS file in angular.json in the styles array in the build section

    "styles": [
              "node_modules/ngx-countries-dropdown/assets/styles.css",
              "src/styles.scss"
            ],
   

3. Import NgxCountriesDropdownModule import NgxCountriesDropdownModule in module where you want to add the countries dropdown, it may be app-module, some lazy loaded module or a standalone component

     imports: [
    NgxCountriesDropdownModule
    ],
   

4. Add the country component to the component where is being used

<lib-country-list></lib-country-list>

Properties and their usage

####The below table explains what all Input properties country dropdown accepts and their usage

Events

IConfig properties and usage

Config properties can be used to control what will be displayed in the country list and for the selected country.

Exported interface

export interface IConfig {
  hideFlag?: boolean;
  hideCode?: boolean;
  hideName?: boolean;
  hideSearch?: boolean;
  hideDialCode?: boolean;
  displayCapital?: boolean;
  displayLanguageCode?: boolean;
  displayLanguageName?: boolean;
  displayCurrencyCode?: boolean
  displayCurrencyName?: boolean
  displayCurrencySymbol?: boolean

}

Output on country selection

On country selection output of ICountry type will be emitted. Handle country change event

<lib-country-list (onCountryChange)="onCountryChange($event)"></lib-country-list>

  onCountryChange(country: ICountry){
    console.log(country);
  }

output in console

{
    "name": "Afghanistan (‫افغانستان‬‎)",
    "code": "AF",
    "capital": "Kabul",
    "region": "AS",
    "currency": {
        "code": "AFN",
        "name": "Afghan afghani",
        "symbol": "؋"
    },
    "language": {
        "code": "ps",
        "name": "Pashto"
    },
    "dialling_code": "+93",
    "isoCode": "004"
}

exported ICountry interface

export interface ICountry {
  name?: string;
  code?: string;
  capital?: string;
  region?: string;
  currency?: ICurrency
  language?: ILanguage
  dialling_code?: string;
  isoCode?: string;
  demonym?: string;
}

export interface ICurrency {
  code?: string | null;
  name?: string;
  symbol?: string | null;
}

export interface ILanguage {
    code?: string;
    name?: string;
    iso639_2?: string,
    nativeName?: string
}

Please provide a star if this package helped you in any way.