How to create a Countries Dropdown with Flags and Search Box
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.
- Open the module where you want to use the countries dropdown (e.g.,
app.module.ts
). - 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
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!