| Angular library to list the countries and their flags in a selection component. |
- Install through npm:
# Install dependencies
$ npm install country-list@^2.1.1
$ npm install flag-icon-css@^3.3.0
# Install library
$ npm install --save ngx-mat-drm-countries-flags- Next config dependencies:
- Include BrowserModule and BrowserAnimationsModule into your app's module:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule
]
})
export class MyModule {}- Include material theme and flag icon css into your angular.json:
{
"styles" : [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css", //Optional
"node_modules/flag-icon-css/css/flag-icon.min.css",
"src/styles.sass"
]
}
- Now import the countries flags module into your app's module:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgxMatDrmCountriesFlagsModule} from 'ngx-mat-drm-countries-flags';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
NgxMatDrmCountriesFlagsModule
]
})
export class MyModule {}- Finally connect the select countries flag via a template property:
<ngx-countries-flags></ngx-countries-flags>
| Name | Description |
|---|---|
| @Input() | |
| max: number | Define the number of countries that will be displayed in the selector. (Ex: max=4) |
| @Input() | |
| filter: array | Define all countries to show in the selector filtered by their ISO 3166-1-alpha-2 code. (Ex: filter=['es', 'br', 'ar', 'uy', 'us', 'gb']) |
Install local dev dependencies: npm install while current directory is this repo.
Run npm start to start a development server on a port 4200.
Open http//:localhost:4200 on your browser.
Run npm test to run tests once or npm run test:watch to continually run tests.
MIT