How to create a Countries Dropdown with Flags and Search Box

Countries dropdown with flags and search using ngx-countries-dropdown

Are you working on an Angular project and in need of a customized countries dropdown with flags and a search box? Look no further! In this tutorial, we’ll explore how to integrate the ngx-countries-dropdown library to achieve just that.

Demo

https://kapilkumar0037.github.io/ngx-countries-dropdown-demo

Prerequisites

Before we begin, ensure you have an Angular project set up. If not, follow these commands to create a new Angular project:

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

Once your Angular application is set up, you’re ready to proceed.

Installation

Let’s start by installing the ngx-countries-dropdown library. Run the following command in your project directory:

npm i ngx-countries-dropdown

Adding Styles

The ngx-countries-dropdown package provides a CSS file for styling. You can either import it directly into your styles.scss file or add it to the styles array in your angular.json file. Here's how you can do it in the styles.scss file:

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

Integrating ngx-countries-dropdown

Now, let’s integrate the ngx-countries-dropdown module into your Angular project.

1. Open the module where you want to use the countries dropdown (e.g., app.module.ts).
2. Import NgxCountriesDropdownModule:

import { NgxCountriesDropdownModule } from 'ngx-countries-dropdown';

3. Add NgxCountriesDropdownModule to the imports array:

@NgModule({
  imports: [NgxCountriesDropdownModule],
  // ...
})

Adding the Countries Dropdown Component

Place the following code in the component’s template where you want to display the countries dropdown:

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

Customizing the Dropdown

You can customize the dropdown by using various input properties. For instance, to select a country by default use the following code:

<lib-country-list
  [selectedCountryCode]="'us'
></lib-country-list>

Other customization options

Below is the list which explains what all features ngx-countries-dropdown-package provides

a. Create a dial code dropdown

b. Create a currency dropdown

c. Create a language dropdown

d. Create a country dropdown with capitals

e. Create a country dropdown to display preferred countries on top in a different section

f. Create a country dropdown only with specific countries

g. Create a countries dropdown with some countries blocked

Selected Country data

{
    "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"
}

You can access all features demo here.

Demo GitHub repository

GitHub - kapilkumar0037/country-library-usecases: Examples created with ngx-countries-dropdown…

Npm package

https://www.npmjs.com/package/ngx-countries-dropdown

Conclusion

As mentioned this library also offers customization options to meet your project's specific needs. Feel free to explore additional features and configurations offered by the library to enhance the user experience even further. Happy coding!