@tcon-22/select-country NPM

@tcon-22/select-country - Angular Material component that allow users to select a country or nationality with a default and an autocomplete feature - Angular V8 supported incl. schematics

If you like this project, support tcon-22 :star: it :loudspeaker: it

Library's components

<mat-select-country> used to display the main component

Dependencies

Angular developed and tested with 8.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

ng add @tcon-22/select-country

2. Install via npm. (Alternative)

Install peer dependencies

npm i svg-country-flags -s

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

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

Now install @tcon-22/select-country via:

npm install --save @tcon-22/select-country

Import the library

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

Once installed you need to import the main module:

import { MatSelectCountryModule } from '@tcon-22/select-country';

import { MatSelectCountryModule } from '@tcon-22/select-country';

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

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

API

`<mat-select-country>` used to display the main component - see the demo examples

option	bind	type	default	description
appearance	`Input()`	`MatFormFieldAppearance`	-	Possible appearance styles for `mat-form-field`	'legacy'	'standard'	'fill'	'outline'
label	`Input()`	`boolean`	-	`mat-form-field` label's text
placeHolder	`Input()`	`boolean`	-	input placeholder text
disabled	`Input()`	`boolean`	-	Whether the component is disabled
readonly	`Input()`	`boolean`	-	Whether the component is read only
defaultValue	`Input()`	`string`	-	alpha2Code of default selected value
onCountrySelected	`Output()`	`EventEmitter<Country>`	-	emits the selected country as object (see the interface below)

interface Country {
  name: string;
  alpha2Code: string;
  alpha3Code: string;
  numericCode: string;
}

Usage

add the <mat-select-country> element to your template:

<mat-select-country [placeHolder]="'Select Country'"
                    [defaultValue]="'GB'"
                    [readonly]="'false'"
                    [disabled]="'false'"
                    (onCountrySelected)="onCountrySelected($event)">