{"id":24961801,"url":"https://github.com/wlucha/ng-country-select","last_synced_at":"2026-02-22T10:01:06.702Z","repository":{"id":275270876,"uuid":"925459521","full_name":"wlucha/ng-country-select","owner":"wlucha","description":"🌍  A smart, multilingual country search with flags and codes made with Angular","archived":false,"fork":false,"pushed_at":"2026-02-21T09:06:36.000Z","size":5163,"stargazers_count":20,"open_issues_count":2,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-21T15:44:19.478Z","etag":null,"topics":["angular","angular-country","angular-material","angular19","country-autocomplete","country-select","mat-autocomplete","ng-country-select"],"latest_commit_sha":null,"homepage":"https://wlucha.github.io/ng-country-select/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wlucha.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-31T23:26:32.000Z","updated_at":"2026-02-21T08:22:46.000Z","dependencies_parsed_at":"2026-02-22T10:00:49.389Z","dependency_job_id":null,"html_url":"https://github.com/wlucha/ng-country-select","commit_stats":null,"previous_names":["wlucha/ng-country-select"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/wlucha/ng-country-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlucha%2Fng-country-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlucha%2Fng-country-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlucha%2Fng-country-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlucha%2Fng-country-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wlucha","download_url":"https://codeload.github.com/wlucha/ng-country-select/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlucha%2Fng-country-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29708803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T05:59:28.568Z","status":"ssl_error","status_checked_at":"2026-02-22T05:58:46.208Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-country","angular-material","angular19","country-autocomplete","country-select","mat-autocomplete","ng-country-select"],"created_at":"2025-02-03T08:56:54.135Z","updated_at":"2026-02-22T10:01:06.673Z","avatar_url":"https://github.com/wlucha.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# 🌍 Angular Material Country Autocomplete\n\n**A smart, multilingual country search with flags and codes made with Angular**  \n✨ *Enhance your Angular forms with this elegant, high-performance autocomplete* ✨\n\n[![GitHub Stars](https://img.shields.io/github/stars/wlucha/ng-country-select?style=for-the-badge\u0026logo=github)](https://github.com/wlucha/ng-country-select/stargazers)\n[![Angular Version](https://img.shields.io/badge/Angular-16+-brightgreen?style=for-the-badge\u0026logo=angular)](https://angular.io/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/e7946ea0-14ea-414c-8f48-c11dd257bfd1\"\u003e\n\u003c/p\u003e\n\n\n## 📢 Features\n\n- **🅰️ Fully Compatible with Angular 16-21**  \nThis library is designed to work seamlessly with the latest Angular versions (16, 17, 18, 19, 20, 21).  \nIt leverages modern Angular features while maintaining backward compatibility.\n\n- **🌍 Multi-language Magic**  \n  Supports English, French, Spanish, Italian, German, Arabic, Chinese, Hindi, Bengali, Portuguese, Russian — plus easily extendable to **any custom language** via `provideCountrySelectConfig()`\n\n- **🎌 Flag Images** 🇺🇸 🇩🇪 🇫🇷 🇪🇸 🇮🇹  \n  OS \u0026 Browser independent flag images\n\n- **⚡ Optimized Performance**  \n  RxJS-powered search with debounce \u0026 virtual scrolling\n\n- **🔍 Smart Search**  \n  Search countries by: ✓ Localized name  ✓ Any translation  ✓ Alpha2/3 codes  \n\n- **🎨 Material Design Excellence**  \n  Seamless integration with Angular Material components\n\n- **🧩 Standalone Component**  \n  Zero boilerplate integration\n\n## 🚀 Demo\nLive Demo: [**https://wlucha.github.io/ng-country-select**](https://wlucha.github.io/ng-country-select)\n\nStackblitz: [https://stackblitz.com/~/github.com/wlucha/ng-country-select](https://stackblitz.com/~/github.com/wlucha/ng-country-select)\n\n## 🌍 Compatibility\n\n| Angular Version                                                   | ✅ Supported |\n|-------------------------------------------------------------------|--------------|\n| ![Angular 21](https://img.shields.io/badge/Angular-21-lightgreen) | ✅ Yes       |\n| ![Angular 20](https://img.shields.io/badge/Angular-20-green)      | ✅ Yes       |\n| ![Angular 19](https://img.shields.io/badge/Angular-19-yellow)     | ✅ Yes       |\n| ![Angular 18](https://img.shields.io/badge/Angular-18-orange)     | ✅ Yes       |\n| ![Angular 17](https://img.shields.io/badge/Angular-17-red)        | ✅ Yes       |\n| ![Angular 16](https://img.shields.io/badge/Angular-16-darkred)    | ✅ Yes       |\n\n## 🛠️ Setup in 60 Seconds\n## 1. Install Dependencies\n### Quick Installation (`ng add`)\n```sh\nng add @wlucha/ng-country-select\n```\n\nThis command will install the `@wlucha/ng-country-select` library + all required dependencies.  \n\n#### (Alternative) Install Dependencies manually \u0026 update Angular.json styles\n```sh\n# Install dependencies\nnpm install --save @angular/material @angular/cdk @angular/animations flag-icons @wlucha/ng-country-select\n\n# Add the flag icon styles to Angular.json \"styles\" array\n\"architect\": {\n   \"build\": {\n      \"options\": {\n        ...,\n        \"styles\": [\n          ...,\n          \"flag-icons/css/flag-icons.min.css\"\n        ]\n      }\n    }\n  }\n}    \n```\n\n\n### 2. Import Component\n```typescript\nimport { CountrySelectComponent } from '@wlucha/ng-country-select';\n\n@NgModule({\n  imports: [\n    CountrySelectComponent,\n    // ... other imports\n  ]\n})\n```\n\n### 3. Add Basic Usage\n```html\n\u003cng-country-select\n  [lang]=\"'en'\"\n  (countrySelected)=\"handleSelection($event)\"\n\u003e\u003c/ng-country-select\u003e\n```\n\n## 🎛️ Parameters Worth Exploring\n\n### 🎚️ Inputs\n\n| Parameter                             | Type                         | Default               | Description                                                                              |\n|---------------------------------------|------------------------------|-----------------------|------------------------------------------------------------------------------------------|\n| `defaultCountry`                      | `Country \\| null`            | `null`                | Sets an initial preselected country                                                      |\n| `formControl`                         | `FormControl\u003cCountry \\| null\u003e` | `new FormControl(null)` | Reactive form control for the country select                                           |\n| `selectedCountry`                     | `Country \\| null`            | -                     | Sets a country programmatically (after init)                                             |\n| `selectedCountryByAlpha2`             | `string`                     | -                     | Set a country programmatically by its alpha2 code                                        |\n| `selectedCountryByAlpha3`             | `string`                     | -                     | Set a country programmatically by its alpha3 code                                        |\n| `selectedCountryByCurrentTranslation` | `string`                     | -                     | Set a country programmatically by its name in the current language                        |\n| `lang`                                | `string`                     | `'en'`                | Language for displaying country names — supports built-in and custom languages            |\n| `searchAllLanguages`                  | `boolean`                    | `false`               | If `true`, searching will match in **all** available translations                        |\n| `placeholder`                         | `string`                     | `'Search country'`    | Placeholder text for the input field                                                     |\n| `label`                               | `string \\| undefined`        | `undefined`           | Custom label for the form field                                                          |\n| `showLabel`                           | `boolean`                    | `true`                | Whether to show the label (uses `label` or `placeholder` as fallback)                    |\n| `debounceTime`                        | `number`                     | `100`                 | Debounce time in milliseconds for the search input                                       |\n| `disabled`                            | `boolean`                    | `false`               | Disables the component if `true`                                                         |\n| `appearance`                          | `'fill' \\| 'outline'`        | `'fill'`              | Appearance style of the form field                                                       |\n| `required`                            | `boolean`                    | `false`               | Marks the field as required if `true`                                                    |\n| `requiredErrorMessage`                | `string`                     | `'A country is required'` | Error message shown when the field is required and empty                              |\n| `showRequiredErrorMessage`            | `boolean`                    | `false`               | Whether to show the built-in required error message                                      |\n| `showCodes`                           | `boolean`                    | `false`               | If `true`, shows alpha2/alpha3 codes in the autocomplete results                         |\n| `color`                               | `ThemePalette`               | `'primary'`           | Angular Material color palette (`'primary'`, `'accent'`, `'warn'`)                       |\n| `includeCountries`                    | `string[]`                   | `[]`                  | List of alpha2 country codes to include (e.g., `['us', 'de', 'fr']`)                     |\n| `excludeCountries`                    | `string[]`                   | `[]`                  | List of alpha2 country codes to exclude (e.g., `['us', 'de', 'fr']`)                     |\n| `alpha2Only`                          | `boolean`                    | `false`               | Show only alpha2 codes in the results                                                    |\n| `alpha3Only`                          | `boolean`                    | `false`               | Show only alpha3 codes in the results                                                    |\n| `showFlag`                            | `boolean`                    | `true`                | Whether the flag should be displayed                                                     |\n\n### 🚨 Outputs\n\n| Event               | Type              | Description                                |\n|---------------------|-------------------|--------------------------------------------|\n| `countrySelected`   | `Country`         | Emits the full country object on selection |\n| `inputChanged`      | `string`          | Emits the current search term on change    |\n| `closed`            | `void`            | Emits when the autocomplete panel closes   |\n\n## 💻 Power User Setup\n```html\n\u003cng-country-select\n  [lang]=\"'en'\"\n  [formControl]=\"countryControl\"\n  [searchAllLanguages]=\"true\"\n  [showCodes]=\"true\"\n  [debounceTime]=\"200\"\n  [required]=\"true\"\n  [requiredErrorMessage]=\"'A country is required'\"\n  [showRequiredErrorMessage]=\"true\"\n  [disabled]=\"false\"\n  [appearance]=\"'outline'\"\n  [placeholder]=\"'Search country'\"\n  [color]=\"primary\"\n  [alpha2Only]=\"false\"\n  [alpha3Only]=\"false\"\n  [showFlag]=\"true\"\n  [excludeCountries]=\"['US', 'DE', 'FR']\"\n  (countrySelected)=\"onCountrySelect($event)\"\n  (inputChanged)=\"trackSearchTerm($event)\"\n\u003e\u003c/ng-country-select\u003e\n```\n\n## 🌐 Custom Language Support\n\nYou can add custom translations or override existing ones using `provideCountrySelectConfig()`.\n\n### Adding extra translations (e.g. Polish)\n\n```typescript\n// app.config.ts\nimport { provideCountrySelectConfig } from '@wlucha/ng-country-select';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideCountrySelectConfig({\n      extraTranslations: {\n        de: { pl: 'Niemcy', ja: 'ドイツ' },\n        at: { pl: 'Austria', ja: 'オーストリア' },\n        fr: { pl: 'Francja', ja: 'フランス' },\n        // ... add translations for all countries\n      }\n    })\n  ]\n};\n```\n\nThen use the custom language in your template:\n\n```html\n\u003cng-country-select\n  [lang]=\"'pl'\"\n  [placeholder]=\"'Szukaj kraju'\"\n\u003e\u003c/ng-country-select\u003e\n```\n\n### Replacing the entire country list\n\nFor full control, you can replace the built-in country list entirely:\n\n```typescript\nprovideCountrySelectConfig({\n  countries: [\n    {\n      alpha2: 'de',\n      alpha3: 'deu',\n      translations: { en: 'Germany', pl: 'Niemcy', ja: 'ドイツ' }\n    },\n    // ... your custom list\n  ]\n})\n```\n\n### Exported symbols\n\n| Symbol                        | Type              | Description                              |\n|-------------------------------|-------------------|------------------------------------------|\n| `provideCountrySelectConfig`  | `function`        | Provider helper for app config           |\n| `COUNTRY_SELECT_CONFIG`       | `InjectionToken`  | Token for advanced DI scenarios          |\n| `CountrySelectConfig`         | `interface`       | Configuration type                       |\n\n## 🌟 Support the Project\n\n**Love this component? Here's how you can help:**\n\n1. ⭐ **Star the repo** (you're awesome!)  \n2. 🐛 **Report bugs** [here](https://github.com/wlucha/ng-country-select/issues)  \n3. 💡 **Suggest features**  \n4. 📢 **Share with your network**\n\n```bash\n# Your star fuels development! ⭐\n# Clone and explore:\ngit clone https://github.com/wlucha/ng-country-select.git\n````\n\n---\n\n📄 License: MIT  \n👨💻 Maintainer: Wilfried Lucha\n\nMade with ❤️ \u0026 ☕ by Open Source Contributors\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlucha%2Fng-country-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwlucha%2Fng-country-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlucha%2Fng-country-select/lists"}