Hey everyone! I'm super excited to introduce ng-country-select – a high-performance, multilingual country autocomplete built on Angular and Angular Material. If you’ve ever needed a quick and elegant way to select countries in your apps (complete with flags, codes, and translations), look no further! https://github.com/wlucha/ng-country-select ✨ Why ng-country-select? 🚀 Angular 16+ Ready – Fully compatible with Angular 16, 17, 18, and 19.
🌐 Multi-Language Magic – English, German, French, Spanish and Italian out of the box, and super easy to add more.
🎌 Automatic Flag Emojis – Zero image dependencies! Relying on ISO codes for the magic.
🔍 Intelligent Search – Match by local name, English name, alpha2/3 codes, or any available translation.
🎨 Material Design – Seamless integration with Angular Material for a polished UI.
⚡ Performance – RxJS-based searching with debouncing and optional virtual scrolling.
🧩 Standalone – Import the component directly, no extra boilerplate needed. 📺 Live Demo Try it out in our Live Demo and see it in action! 🌍 Angular Compatibility Angular Version

Supported?





✅ Yes





✅ Yes





✅ Yes





✅ Yes 🛠️ Setup in 60 Seconds 1. Install Dependencies npm install --save @angular/material @angular/cdk @angular/animations @wlucha/ng-country-select 2. Import Component import { CountrySelectComponent } from '@wlucha/ng-country-select';

@NgModule({
  imports: [
    CountrySelectComponent,
    // ... other imports
  ]
}) 3. Add Basic Usage <ng-country-select
  [lang]="'en'"
  (countrySelected)="handleSelection($event)"
></ng-country-select> 🎛️ Parameters 🎚️ Inputs Parameter

Type

Default

Description



defaultCountry

`Country

null`

null



selectedCountry

`Country

null`

-



lang

string

'en'

Language for displaying country names (e.g., en, de, fr)



searchAllLanguages

boolean

false

If true, searching will match in all available translations



placeholder

string

'Search country'

Placeholder text for the input field



debounceTime

number

100

Debounce time in milliseconds for the search input



disabled

boolean

false

Disables the component if true



appearance

`'fill'

'outline'`

'fill'



required

boolean

false

Marks the field as required if true



showCodes

boolean

false

If true, shows alpha2/alpha3 codes in the autocomplete results



color

ThemePalette

'primary'

Angular Material color palette to use ('primary', 'accent', 'warn') 🚨 Outputs Event

Output

Description



countrySelected

Country

Full country object on selection



inputChanged

string

Live search term updates



closed

void

When dropdown closes 💻 Power User Setup <ng-country-select
  [lang]="'en'"
  [searchAllLanguages]="true"
  [showCodes]="true"
  [debounceTime]="200"
  [appearance]="'outline'"
  [placeholder]="'Search country'"
  (countrySelected)="onCountrySelect($event)"
  (inputChanged)="trackSearchTerm($event)"
></ng-country-select> 🌟 Support the Project Love this component? Here's how you can help: ⭐ Star the repo (you're awesome!)
🐛 Report bugs here
💡 Suggest features
📢 Share with your network # Your star fuels development! ⭐
# Clone and explore:
git clone https://github.com/wlucha/ng-country-select.git https://github.com/wlucha/ng-country-select Hey everyone! I'm super excited to introduce ng-country-select – a high-performance, multilingual country autocomplete built on Angular and Angular Material . If you’ve ever needed a quick and elegant way to select countries in your apps (complete with flags, codes, and translations), look no further! ng-country-select ng-country-select Angular Angular Material https://github.com/wlucha/ng-country-select https://github.com/wlucha/ng-country-select ✨ Why ng-country-select? 🚀 Angular 16+ Ready – Fully compatible with Angular 16, 17, 18, and 19. 🌐 Multi-Language Magic – English, German, French, Spanish and Italian out of the box, and super easy to add more. 🎌 Automatic Flag Emojis – Zero image dependencies! Relying on ISO codes for the magic. 🔍 Intelligent Search – Match by local name, English name, alpha2/3 codes, or any available translation. 🎨 Material Design – Seamless integration with Angular Material for a polished UI. ⚡ Performance – RxJS-based searching with debouncing and optional virtual scrolling. 🧩 Standalone – Import the component directly, no extra boilerplate needed. 🚀 Angular 16+ Ready – Fully compatible with Angular 16, 17, 18, and 19. 🚀 Angular 16+ Ready 🌐 Multi-Language Magic – English, German, French, Spanish and Italian out of the box, and super easy to add more. 🌐 Multi-Language Magic 🎌 Automatic Flag Emojis – Zero image dependencies! Relying on ISO codes for the magic. 🎌 Automatic Flag Emojis 🔍 Intelligent Search – Match by local name, English name, alpha2/3 codes, or any available translation. 🔍 Intelligent Search any 🎨 Material Design – Seamless integration with Angular Material for a polished UI. 🎨 Material Design ⚡ Performance – RxJS-based searching with debouncing and optional virtual scrolling. ⚡ Performance 🧩 Standalone – Import the component directly, no extra boilerplate needed. 🧩 Standalone 📺 Live Demo Try it out in our Live Demo and see it in action! Live Demo Live Demo 🌍 Angular Compatibility Angular Version

Supported?





✅ Yes





✅ Yes





✅ Yes





✅ Yes Angular Version

Supported? ✅ Yes ✅ Yes ✅ Yes ✅ Yes Angular Version Supported? Angular Version Angular Version Supported? Supported? ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes ✅ Yes 🛠️ Setup in 60 Seconds 1. Install Dependencies npm install --save @angular/material @angular/cdk @angular/animations @wlucha/ng-country-select npm install --save @angular/material @angular/cdk @angular/animations @wlucha/ng-country-select 2. Import Component import { CountrySelectComponent } from '@wlucha/ng-country-select';

@NgModule({
  imports: [
    CountrySelectComponent,
    // ... other imports
  ]
}) import { CountrySelectComponent } from '@wlucha/ng-country-select';

@NgModule({
  imports: [
    CountrySelectComponent,
    // ... other imports
  ]
}) 3. Add Basic Usage <ng-country-select
  [lang]="'en'"
  (countrySelected)="handleSelection($event)"
></ng-country-select> <ng-country-select
  [lang]="'en'"
  (countrySelected)="handleSelection($event)"
></ng-country-select> 🎛️ Parameters 🎚️ Inputs Parameter

Type

Default

Description



defaultCountry

`Country

null`

null



selectedCountry

`Country

null`

-



lang

string

'en'

Language for displaying country names (e.g., en, de, fr)



searchAllLanguages

boolean

false

If true, searching will match in all available translations



placeholder

string

'Search country'

Placeholder text for the input field



debounceTime

number

100

Debounce time in milliseconds for the search input



disabled

boolean

false

Disables the component if true



appearance

`'fill'

'outline'`

'fill'



required

boolean

false

Marks the field as required if true



showCodes

boolean

false

If true, shows alpha2/alpha3 codes in the autocomplete results



color

ThemePalette

'primary'

Angular Material color palette to use ('primary', 'accent', 'warn') Parameter

Type

Default

Description defaultCountry

`Country

null`

null selectedCountry

`Country

null`

- lang

string

'en'

Language for displaying country names (e.g., en, de, fr) searchAllLanguages

boolean

false

If true, searching will match in all available translations placeholder

string

'Search country'

Placeholder text for the input field debounceTime

number

100

Debounce time in milliseconds for the search input disabled

boolean

false

Disables the component if true appearance

`'fill'

'outline'`

'fill' required

boolean

false

Marks the field as required if true showCodes

boolean

false

If true, shows alpha2/alpha3 codes in the autocomplete results color

ThemePalette

'primary'

Angular Material color palette to use ('primary', 'accent', 'warn') Parameter Type Default Description Parameter Parameter Type Type Default Default Description Description defaultCountry `Country null` null defaultCountry defaultCountry defaultCountry `Country `Country null` null` null null null selectedCountry `Country null` - selectedCountry selectedCountry selectedCountry `Country `Country null` null` - - lang string 'en' Language for displaying country names (e.g., en, de, fr) lang lang lang string string string 'en' 'en' 'en' Language for displaying country names (e.g., en, de, fr) Language for displaying country names (e.g., en , de , fr ) en de fr searchAllLanguages boolean false If true, searching will match in all available translations searchAllLanguages searchAllLanguages searchAllLanguages boolean boolean boolean false false false If true, searching will match in all available translations If true , searching will match in all available translations true all placeholder string 'Search country' Placeholder text for the input field placeholder placeholder placeholder string string string 'Search country' 'Search country' 'Search country' Placeholder text for the input field Placeholder text for the input field debounceTime number 100 Debounce time in milliseconds for the search input debounceTime debounceTime debounceTime number number number 100 100 100 Debounce time in milliseconds for the search input Debounce time in milliseconds for the search input disabled boolean false Disables the component if true disabled disabled disabled boolean boolean boolean false false false Disables the component if true Disables the component if true true appearance `'fill' 'outline'` 'fill' appearance appearance appearance `'fill' `'fill' 'outline'` 'outline'` 'fill' 'fill' 'fill' required boolean false Marks the field as required if true required required required boolean boolean boolean false false false Marks the field as required if true Marks the field as required if true true showCodes boolean false If true, shows alpha2/alpha3 codes in the autocomplete results showCodes showCodes showCodes boolean boolean boolean false false false If true, shows alpha2/alpha3 codes in the autocomplete results If true , shows alpha2/alpha3 codes in the autocomplete results true color ThemePalette 'primary' Angular Material color palette to use ('primary', 'accent', 'warn') color color color ThemePalette ThemePalette ThemePalette 'primary' 'primary' 'primary' Angular Material color palette to use ('primary', 'accent', 'warn') Angular Material color palette to use ( 'primary' , 'accent' , 'warn' ) 'primary' 'accent' 'warn' 🚨 Outputs Event

Output

Description



countrySelected

Country

Full country object on selection



inputChanged

string

Live search term updates



closed

void

When dropdown closes Event

Output

Description countrySelected

Country

Full country object on selection inputChanged

string

Live search term updates closed

void

When dropdown closes Event Output Description Event Event Output Output Description Description countrySelected Country Full country object on selection countrySelected countrySelected countrySelected Country Country Country Full country object on selection Full country object on selection inputChanged string Live search term updates inputChanged inputChanged inputChanged string string string Live search term updates Live search term updates closed void When dropdown closes closed closed closed void void void When dropdown closes When dropdown closes 💻 Power User Setup <ng-country-select
  [lang]="'en'"
  [searchAllLanguages]="true"
  [showCodes]="true"
  [debounceTime]="200"
  [appearance]="'outline'"
  [placeholder]="'Search country'"
  (countrySelected)="onCountrySelect($event)"
  (inputChanged)="trackSearchTerm($event)"
></ng-country-select> <ng-country-select
  [lang]="'en'"
  [searchAllLanguages]="true"
  [showCodes]="true"
  [debounceTime]="200"
  [appearance]="'outline'"
  [placeholder]="'Search country'"
  (countrySelected)="onCountrySelect($event)"
  (inputChanged)="trackSearchTerm($event)"
></ng-country-select> 🌟 Support the Project Love this component? Here's how you can help: Love this component? Here's how you can help: ⭐ Star the repo (you're awesome!) 🐛 Report bugs here 💡 Suggest features 📢 Share with your network ⭐ Star the repo (you're awesome!) Star the repo 🐛 Report bugs here Report bugs here 💡 Suggest features Suggest features 📢 Share with your network Share with your network # Your star fuels development! ⭐
# Clone and explore:
git clone https://github.com/wlucha/ng-country-select.git # Your star fuels development! ⭐
# Clone and explore:
git clone https://github.com/wlucha/ng-country-select.git https://github.com/wlucha/ng-country-select https://github.com/wlucha/ng-country-select

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Stop Wasting Time on Country Dropdowns – This Angular Tool Does It All!

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Building Enterprise Angular Apps? You’re Doing It Wrong (Unless You Use Standalone Components)

How to Manage Modal Windows in Angular Apps

Learn the Basics of Angular CDK Overlay: Angular Modals and Pop-ups

Animating Angular CDK Overlays

A Deep Dive into Angular ngFor Performance Enhancement with TrackBy

Building Enterprise Angular Apps? You’re Doing It Wrong (Unless You Use Standalone Components)

How to Manage Modal Windows in Angular Apps

Learn the Basics of Angular CDK Overlay: Angular Modals and Pop-ups

Animating Angular CDK Overlays

A Deep Dive into Angular ngFor Performance Enhancement with TrackBy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps