Ngx-mat-drm-countries-flags NPM

Angular Select Countries with flags

Dependecies

Demo

How to Use

1.) Install through npm:

# Install dependencies
$ npm install country-list
$ npm install flag-icon-css
# Install library
$ npm install --save ngx-mat-drm-countries-flags

2.) 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:
```jsmin 
{
  "styles" : [
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", //Optional
      "node_modules/flag-icon-css/css/flag-icon.min.css",
      "src/styles.sass"
  ]
}

3.) 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 {}

4.) Finally connect the select countries flag via a template property:

<ngx-countries-flags></ngx-countries-flags>

Properties (Optional)

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') |