height="256px" width="256px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/angular-material-extensions-logo.svg">

@angular-material-extensions/select-country - Angular Material component that allow users to select a country or nationality with an autocomplete feature


src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/select-country.gif">

src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/select-country.png">

Built by and for developers :heart:

Do you have any question or suggestion ? Please do not hesitate to contact us!
Alternatively, provide a PR | open an appropriate issue here

If you like this project, support angular-material-extensions
by starring :star: and sharing it :loudspeaker:

Table of Contents

- Demo
- Components
- Dependencies
- Installation
- API
- Usage
- Run Demo App Locally
- Other Angular Libraries
- Support
- License

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/select-country

Library's components

- used to display the main component

---

Dependencies

* Angular developed and tested with 17.x

---

Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics
``shell
ng add @angular-material-extensions/select-country
`

2. Install via npm. (Alternative)

Install peer dependencies
`shell
npm i svg-country-flags -s
`

then update your angular.json like below (svg-country-flags)

`json
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "*/",
"input": "./node_modules/svg-country-flags/svg",
"output": "src/assets/svg-country-flags/svg"
}
],
`

Now install @angular-material-extensions/select-country via:

`shell
npm install --save @angular-material-extensions/select-country
`

$3

If you installed the library via angular schematics, you can skip this step

Once installed you need to import the main module and the HttpClientModule:

`js
import { MatSelectCountryModule } from "@angular-material-extensions/select-country";
`

`typescript
import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
declarations: [AppComponent, ...],
imports: [
MatSelectCountryModule.forRoot('de'), // you can use 'br' | 'de' | 'en' | 'es' | 'fr' | 'hr' | 'hu' | 'it' | 'nl' | 'pt' --> MatSelectCountrySupportedLanguages
HttpClientModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

in other modules

`typescript
import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
declarations: [AppComponent, ...],
imports: [MatSelectCountryModule, HttpClientModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

Other modules in your application like for lazy loading import MatSelectCountryModule into your feature module:

API

$3

| option | bind | type | default | description |
| :---------------- | :--------: | :----------------------: | :-----------------------------: | :------------------------------------------------------------------------------------------------- |
| value | Input() | Country | - | the selected country (pass an empty Country object with alpha2 code populated to do alpha2 lookup) |
| appearance | Input() | MatFormFieldAppearance | - | Possible appearance styles for mat-form-field ('legacy', 'standard', 'fill' or 'outline') |
| countries | Input() | Country[] | All countries stored in the lib | Countries that should be loaded - predefine the countries that you only need! |
| label | Input() | boolean | - | mat-form-field label's text |
| itemsLoadSize | Input() | number | - | the number of countries that should be fetched --> improves the performance |
| placeHolder | Input() | boolean | - | input placeholder text |
| disabled | Input() | boolean | - | Whether the component is disabled |
| loading | Input() | boolean | - | Whether the component is loading |
| nullable | Input() | boolean | - | Whether the component is able to emit null |
| readonly | Input() | boolean | - | Whether the component is read only |
| tabIndex | Input() | number \| string | - | Whether the component can be focused, and where it participates in sequential keyboard navigation |
| showCallingCode | Input() | boolean | false | Whether the component to show the country's calling code in the label and selection |
| class | Input() | string | - | Class attribute apply style to input text or validation ignore (optional) |
| language | Input() | string | - | the language, if not specified MatSelectCountryModule.forRoot('XX') will be used (optional) |
| name | Input() | string | 'country' | the attribute name of the input element |
| autocomplete | Input() | string | - | the attribute autocomplete of the input element, to avoid suggestion of some browsers put 'no' |
| onCountrySelected | Output() | EventEmitter | - | emits the selected country as object (see the interface below) |

`typescript
interface Country {
name: string;
alpha2Code: string;
alpha3Code: string;
numericCode: string;
callingCode: string;
}
`




Usage

add the element to your template:

`html


`


src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example_full.png">



src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example3.png">



src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v0.2.0/example2.png">



#### Use the library with reactive forms

$3

`html
label="Country"
[formControl]="countryFormControl"
(onCountrySelected)="onCountrySelected($event)">

`

$3

`html


label="Country"
class="className"
formControlName="country"
(onCountrySelected)="onCountrySelected($event)">

`

`typescript
import {Component,OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';

import {Country} from '@angular-material-extensions/select-country';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'select-country';

countryFormControl = new FormControl();
countryFormGroup: FormGroup;

constructor(private formBuilder: FormBuilder) {
angulartics2GoogleAnalytics.startTracking();
}

ngOnInit(): void {

this.countryFormGroup = this.formBuilder.group({
country: []
});

this.countryFormGroup.get('country').valueChanges
.subscribe(country => console
.log('this.countryFormGroup.get("country").valueChanges', country));

this.countryFormControl.valueChanges
.subscribe(country => console
.log('this.countryFormControl.valueChanges', country));
}


onCountrySelected($event: Country) {
console.log($event);
}
}

`




$3

`html
label="Country"
[countries]="predefinedCountries"
(onCountrySelected)="onCountrySelected($event)">

`

`typescript
import {Country} from '@angular-material-extensions/select-country';

predefinedCountries: Country[] = [
{
name: 'Germany',
alpha2Code: 'DE',
alpha3Code: 'DEU',
numericCode: '276',
callingCode: '+49'
},
{
name: 'Greece',
alpha2Code: 'GR',
alpha3Code: 'GRC',
numericCode: '300',
callingCode: '+30'
},
{
name: 'France',
alpha2Code: 'FR',
alpha3Code: 'FRA',
numericCode: '250',
callingCode: '+33'
},
{
name: 'Belgium',
alpha2Code: 'BE',
alpha3Code: 'BEL',
numericCode: '056',
callingCode: '+32'
}
];
`

Result:


src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v2.1.0/predefined.png">





$3

`html
label="Country"
[itemsLoadSize]="5">

`

only 5 countries will fetched!

$3


`html
label="Country"
[language]="languageSelected"
(onCountrySelected)="onCountrySelected($event)">

`

$3

Build the library

`bash
$ npm run build:lib
`

Serve the demo app

`bash
$ npm start
``

Other Angular Libraries

- ngx-auth-firebaseui
- ngx-linkifyjs
- @angular-material-extensions/password-strength
- @angular-material-extensions/google-maps-autocomplete
- @angular-material-extensions/link-preview
- @angular-material-extensions/fab-menu
- @angular-material-extensions/pages
- @angular-material-extensions/contacts
---

Who is using this library?

nahaus.de - Digital and Automated Real Estate Management

To put your project here, please drop an appropriate PR

-----

Support

+ Drop an email to: Anthony Nahas
+ or open an appropriate issue
+ let us chat on Gitter

Built by and for developers :heart: we will help you :punch:

---

!jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

---

License

Copyright (c) 2020-2024 Anthony Nahas. Licensed under the MIT License (MIT)

height="92px" width="92px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/badge_made-in-germany.svg">