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

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?

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

🛠️ 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

🚨 Outputs

💻 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