https://github.com/lula/-ngx-countries
Angular wrapper for i18n-iso-countries
https://github.com/lula/-ngx-countries
angular angular8 angular9 angularmaterial i18n-iso-countries
Last synced: 4 days ago
JSON representation
Angular wrapper for i18n-iso-countries
- Host: GitHub
- URL: https://github.com/lula/-ngx-countries
- Owner: lula
- License: mit
- Created: 2020-03-30T17:14:42.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T16:33:07.000Z (about 3 years ago)
- Last Synced: 2025-10-02T15:55:16.047Z (4 months ago)
- Topics: angular, angular8, angular9, angularmaterial, i18n-iso-countries
- Language: TypeScript
- Homepage:
- Size: 1.44 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @ngx-countries
This project is a simple Angular wrapper for [i18n-iso-countries](https://github.com/michaelwittig/node-i18n-iso-countries) and [countries](https://github.com/mledoze/countries) libraries.
It gets locales and translations from `i81n-iso-countries` and additional data (currency, flag, etc) from `countries`.
There are three main modules you can use:
- `@ngx-countries/core`: main module, only uses `i81n-iso-countries`.
- `@ngx-countries/countries`: exports a service that gets country data from `countries` lib.
- `@ngx-countries/material`: exports some `@angular/material` components.
## Installation
`npm install --save @ngx-countries/core i18n-iso-countries`
`countries` lib is already bundled in ngx-countries as it doesn't export countries.json.
If you want to have countries data as well:
`npm install --save @ngx-countries/countries`
If you want to use material components:
- Angular Material 8: `npm install --save @ngx-countries/material@^8.0.0`
- Angular Material 9: `npm install --save @ngx-countries/material@^9.0.0`
## Usage
In your root module use `forRoot` method
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgxCountriesModule } from '@ngx-countries/core';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxCountriesModule.forRoot({
locales: ['en', 'it']
}),
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
See [here](https://github.com/michaelwittig/node-i18n-iso-countries#supported-languages-iso-639-1) the supported locales.
You can pass a default locale (default to `en`):
```typescript
NgxCountriesModule.forRoot({
defaultLocale: 'it',
locales: ['en', 'it', 'ja']
})
```
If no locales are passed, only default locale is used.
```typescript
NgxCountriesModule.forRoot({
defaultLocale: 'it'
})
```
If you pass no options in `forRoot` method only `en` is used as locale.
```typescript
NgxCountriesModule.forRoot()
```
In you child modules just import `NgxCountriesModule`.
## Material components
### ngx-countries-autocomplete
Angular Material autocomplete that supports both template and reactive forms.
Basic usage:
```typescript
countryModel: string;
constructor(private fb: FormBuilder, private countriesService: NgxCountriesIsoService) {
this.form = this.fb.group({
country: ''
});
}
```
Reactive form:
```html
Country
Invalid
{{form.value | json}}
```
Template form:
```html
ngModel
Country
{{country}}
```
Available inputs:
- `displayInputValueFn`: function used to display the input value. Default function displays the country name.
- `displayOptionItemFn`: function used to display the option values. Default function displays the country name.
Both have the same interface: `(countryCode: string) => string`
Usage:
```typescript
export class AppComponent {
myDisplayFn(countryCode: string): string {
if (countryCode) {
return this.countriesService.getName(countryCode) + ' - ' + countryCode.toUpperCase();
}
}
constructor(private countriesService: NgxCountriesIsoService, ...) { ... }
}
```
```html
Country
```
- shouldFilterCountryCode: used to filter option items (country codes). Default function returns the country name that starts with the input value.
Interface: `(countryCode: string, searchText: string) => boolean`
Usage:
```typescript
export class AppComponent {
constructor(private countriesService: NgxCountriesIsoService, ...) { ... }
myShouldFilterCountryCode(countryCode: string, searchText: string): boolean {
return this.countriesService
.getName(countryCode)
.toLowerCase()
.indexOf(searchText.toLowerCase()) >= 0;
}
}
```
```html
Country
```
- `optionTemplate`: templare ref to display options items. Template have the country code as implicit context parameter.
Usage:
```html
{{myDisplayFn(code)}}
```
## Example applications
Run `ng build @ngx-countries/core` to build the library (build the other modules as well if you want to run other demo applications `demo-countries-data` or `demo-material`)
When done run `ng serve demo-core` (or `demo-countries-data` or `demo-material`) and go to http://localhost:4200 in your favourite browser once compiled.
## Running unit tests
- `ng test @ngx-countries/core`
- `ng test @ngx-countries/countries`