{"id":31999473,"url":"https://github.com/evicio1/ngx-country-selector","last_synced_at":"2025-10-15T14:08:47.088Z","repository":{"id":316666923,"uuid":"892594492","full_name":"evicio1/ngx-country-selector","owner":"evicio1","description":"NGX Country Selector - translated ngx-countries-dropdown material-select","archived":false,"fork":false,"pushed_at":"2025-10-07T04:35:27.000Z","size":1032,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-07T06:23:47.832Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/evicio1.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"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":"2024-11-22T12:11:17.000Z","updated_at":"2025-10-07T04:34:58.000Z","dependencies_parsed_at":"2025-09-26T01:28:25.385Z","dependency_job_id":"33b2efe2-5d46-442d-80ac-4e8094b3f5d6","html_url":"https://github.com/evicio1/ngx-country-selector","commit_stats":null,"previous_names":["evicio1/ngx-country-selector"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/evicio1/ngx-country-selector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evicio1%2Fngx-country-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evicio1%2Fngx-country-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evicio1%2Fngx-country-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evicio1%2Fngx-country-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evicio1","download_url":"https://codeload.github.com/evicio1/ngx-country-selector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evicio1%2Fngx-country-selector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010171,"owners_count":26084691,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-10-15T14:01:43.054Z","updated_at":"2025-10-15T14:08:47.083Z","avatar_url":"https://github.com/evicio1.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# ngx-country-selector\n\nA modern, feature-rich Angular country selector component built with **Angular Material**. This library provides a beautiful, accessible, and highly customizable dropdown for selecting countries with support for flags, country codes, local names, and more.\n\n## ✨ Features\n\n- 🎨 **Built with Angular Material** - Leverages Material Design components for consistent UI/UX\n- 🏳️ **Country Flags** - Visual flag representations for all countries\n- 🌍 **Comprehensive Country Data** - Includes country codes, local names, capitals, currencies, and languages\n- 🔍 **Search \u0026 Filter** - Built-in search functionality with autocomplete\n- ⚡ **Performance Optimized** - Supports zoneless change detection for better performance\n- 🎯 **Highly Customizable** - Extensive configuration options for appearance and behavior\n- ♿ **Accessible** - Full accessibility support with ARIA attributes\n- 📱 **Responsive** - Works seamlessly across all device sizes\n- 🔧 **Angular 20 Ready** - Compatible with the latest Angular version\n\n## 🛠️ Built With\n\n- **Angular 20+** - Modern Angular framework\n- **Angular Material 20+** - Material Design components (mat-form-field, mat-autocomplete, mat-input, mat-icon, mat-progress-bar, mat-divider)\n- **TypeScript** - Type-safe development experience\n- **SCSS** - Styled with modern CSS preprocessor\n\n*Note: Angular CDK is included as a peer dependency of Angular Material but is not directly used by this library.*\n\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 20.3.2.\n\n## 📋 Prerequisites\n\nThis library requires **Angular Material** to be installed in your project, as it uses Material Design components like `mat-form-field`, `mat-autocomplete`, and `mat-input`.\n\nIf you don't have Angular Material installed:\n\n```bash\nng add @angular/material\n```\n\n## 🚀 Getting started\n\n1. Once your Angular application setup is ready, install the ngx-country-selector library using the following command:\n\n```bash\nnpm i ngx-country-selector\n```\n\n2. Add the CSS\n   Either import the CSS directly to styles.scss file\n\n   ```\n   @import  \"node_modules/ngx-country-selector/assets/styles.css\";\n   ```\n\n   Or, add CSS file in angular.json in the styles array in the build section\n\n   ```\n    \"styles\": [\n              \"node_modules/ngx-country-selector/assets/styles.css\",\n              \"src/styles.scss\"\n            ],\n   ```\n\n3. Import CountrySelectorLibraryComponent\n   import CountrySelectorLibraryComponent in module where you want to add the countries dropdown, it may be app-module, some lazy loaded module or a standalone component\n   ```\n     imports: [\n    CountrySelectorLibraryComponent\n    ],\n   ```\n4. Add the country component to the component where is being used\n\n```html\n\u003clib-country-selector\u003e\u003c/lib-country-selector\u003e\n```\n\n### Properties and their usage\n\n####The below table explains what all Input properties country dropdown accepts and their usage\n\n\u003ctable role=\"table\"\u003e\n \u003ctbody\u003e\u003ctr\u003e\n  \u003ctd\u003eProperty\u003c/td\u003e\n  \u003ctd\u003eType and default values\u003c/td\u003e\n  \u003ctd\u003eDescription\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003epreferredCountryCodes\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: string array(string[]),Default value: []\u003c/td\u003e\n  \u003ctd\u003ethe list of country codes which needs to be displayed on top section. ex. if user provided ['in', 'us'], India and United States will be displayed on top\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eblockedCountryCodes\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: string array(string[]),Default value: []\u003c/td\u003e\n  \u003ctd\u003ean array of country codes which are not required in the list. Ex. if some client is not servicing some specific countries can be removed from the country dropdown using this.  \u003c/td\u003e\n \u003c/tr\u003e\n\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eallowedCountryCodes\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: string array(string[]),Default value: []\u003c/td\u003e\n  \u003ctd\u003eOnly countries which will be displayed in the country list \u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eselectedCountryConfig\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003eIConfig\u003c/b\u003e (see table below for IConfig properties), Default value: {}\u003c/td\u003e\n  \u003ctd\u003eProvides config for the selected country, and controls what all will be displayed. Ex. if the user do not want to display flag for the selected item, can be controlled with this property(refer to config table for details)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003ecountryListConfig\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003eIConfig\u003c/b\u003e (see table below for IConfig properties), Default value: {}\u003c/td\u003e\n  \u003ctd\u003eProvides config for the country list, and controls what all will be displayed in the country list. Ex. if the user do not want to see flag or dial code or name in the country list, can be controlled with this property(refer to config table for details)\u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003elabel\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003estring\u003c/b\u003e Default value: 'Select country'\u003c/td\u003e\n  \u003ctd\u003e`mat-form-field` label's text\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eplaceholderText\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003estring\u003c/b\u003e Default value: 'Select country'\u003c/td\u003e\n  \u003ctd\u003eTo change the default placeholder label.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eloading\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003eboolean\u003c/b\u003e Default value: false\u003c/td\u003e\n  \u003ctd\u003eWhether the component is loading.\u003c/td\u003e\n \u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003ereadonly\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003eboolean\u003c/b\u003e Default value: false\u003c/td\u003e\n  \u003ctd\u003eWhether the component is read only.\u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eclearable\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003eboolean\u003c/b\u003e Default value: false\u003c/td\u003e\n  \u003ctd\u003eTo show clear button.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003erequired\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003eboolean\u003c/b\u003e Default value: false\u003c/td\u003e\n  \u003ctd\u003eWhether the component is required. Note: `FormControl` validator need to be setup too\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eerror\u003c/b\u003e\u003c/td\u003e\n  \u003ctd\u003eType: \u003cb\u003estring\u003c/b\u003e Default value: ''\u003c/td\u003e\n  \u003ctd\u003eTo set the error message for required validation.\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\n### Events\n\n\u003ctable role=\"table\"\u003e\n \u003ctbody\u003e\u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eonCountryChange\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eCountry type \u003cb\u003eICountry\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003ereturns the selected country\u003c/td\u003e\n \u003c/tr\u003e\n\n\u003c/tbody\u003e\u003c/table\u003e\n\n### Reactive forms\n\n```\n loginForm = new FormGroup({\n      username: new FormControl('', [Validators.required]),\n      password: new FormControl('', Validators.required),\n      country: new FormControl({value: {code:'in'} as ICountry | null, disabled: false},\n         Validators.required), // need to send both validator and required input value to make it work\n    });\n```\n\n```\n  \u003clib-country-selector\n  [allowedCountryCodes]=\"allowedCountryCode()\"\n  [countryListConfig]=\"config\"\n  [selectedCountryConfig]=\"selectedConfig\"\n  [loading]=\"loading()\"\n  [readonly]=\"readonly() || loading()\"\n  label=\"Country\"\n  [clearable]=\"!shouldCountryLocked()\"\n  [customNaming]=\"{ gb: 'United Kingdom'}\"\n  formControlName=\"country\"\n  (onCountryChange)=\"onCountryChange($event)\"\n  error=\"Country is required\"\n  [required]=\"true\"\n  \u003e\u003c/lib-country-selector\u003e\n```\n\n### IConfig properties and usage\n\nConfig properties can be used to control what will be displayed in the country list and for the selected country.\n\nExported interface\n\n```\nexport interface IConfig {\n  hideFlag?: boolean;\n  hideCode?: boolean;\n  hideName?: boolean;\n  showLocalName?: boolean;\n  hideSearch?: boolean;\n  hideDialCode?: boolean;\n  displayCapital?: boolean;\n  displayLanguageCode?: boolean;\n  displayLanguageName?: boolean;\n  displayCurrencyCode?: boolean\n  displayCurrencyName?: boolean\n  displayCurrencySymbol?: boolean\n\n}\n```\n\n\u003ctable role=\"table\"\u003e\n \u003ctbody\u003e\u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003ehideFlag\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto hide flag from country list or selected country\u003c/td\u003e\n \u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003ehideCode\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto hide country code \u003c/td\u003e\n \u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003ehideName\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto hide country name \u003c/td\u003e\n \u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003eshowLocalName\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto show local name of the country\u003c/td\u003e\n \u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003ehideSearch\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto hide search field from country list \u003c/td\u003e\n \u003c/tr\u003e\n     \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003ehideDialCode\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto hide dial code \u003c/td\u003e\n \u003c/tr\u003e\n      \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003edisplayCapital\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto display country capital \u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003edisplayLanguageCode\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto display country language code \u003c/td\u003e\n \u003c/tr\u003e\n   \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003edisplayLanguageName\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto display country language name \u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003edisplayCurrencyCode\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto display country currency code \u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003edisplayCurrencyName\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto display country currency name \u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\u003cb\u003edisplayCurrencySymbol\u003c/b\u003e \u003c/td\u003e\n  \u003ctd\u003eBoolean, Default value: false \u003c/td\u003e\n  \u003ctd\u003eto display country currency symbol \u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\n### Output on country selection\n\nOn country selection output of ICountry type will be emitted.\nHandle country change event\n\n```\n\u003clib-country-selector (onCountryChange)=\"onCountryChange($event)\"\u003e\u003c/lib-country-selector\u003e\n```\n\n```\n  onCountryChange(country: ICountry){\n    console.log(country);\n  }\n```\n\noutput in console\n\n```\n{\n    name: 'Afghanistan',\n    localName: '‫افغانستان‬‎',\n    code: 'AF',\n    capital: 'Kabul',\n    region: 'AS',\n    currency: {\n      code: 'AFN',\n      name: 'Afghan afghani',\n      symbol: '؋',\n    },\n    language: {\n      code: 'ps',\n      name: 'Pashto',\n    },\n    dialling_code: '+93',\n    isoCode: '004',\n  },\n```\n\n### exported ICountry interface\n\n```\nexport interface ICountry {\n  name?: string;\n  localName?: string;\n  code?: string;\n  capital?: string;\n  region?: string;\n  currency?: ICurrency\n  language?: ILanguage\n  dialling_code?: string;\n  isoCode?: string;\n  demonym?: string;\n}\n\nexport interface ICurrency {\n  code?: string | null;\n  name?: string;\n  symbol?: string | null;\n}\n\nexport interface ILanguage {\n    code?: string;\n    name?: string;\n    iso639_2?: string,\n    nativeName?: string\n}\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE.txt) file for details.\n\n## Acknowledgment\n\nThis project includes code and concepts inspired by the following:\n\n1. [angular-material-extensions/select-country](https://github.com/angular-material-extensions/select-country) by [Anthony Nahas](https://github.com/AnthonyNahas), licensed under the MIT License.\n2. [ngx-countries-dropdown](https://github.com/kapilkumar0037/ngx-countries-dropdown) by [Kapil Kumar](https://github.com/kapilkumar0037), licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevicio1%2Fngx-country-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevicio1%2Fngx-country-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevicio1%2Fngx-country-selector/lists"}