🌍 Angular Material Country Autocomplete

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!

GIF

✨ Why ng-country-select?

1. 🚀 Angular 16+ Ready – Fully compatible with Angular 16, 17, 18, and 19.
2. 🌐 Multi-Language Magic – English, German, French, Spanish and Italian out of the box, and super easy to add more.
3. 🎌 Automatic Flag Emojis – Zero image dependencies! Relying on ISO codes for the magic.
4. 🔍 Intelligent Search – Match by local name, English name, alpha2/3 codes, or any available translation.
5. 🎨 Material Design – Seamless integration with Angular Material for a polished UI.
6. ⚡ Performance – RxJS-based searching with debouncing and optional virtual scrolling.
7. 🧩 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:

1. ⭐ Star the repo (you're awesome!)
2. 🐛 Report bugs here
3. 💡 Suggest features
4. 📢 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