Angular 2 Dropdown with flags and countrycode

Question

my app is internationalized with ng2 translate,and in my login page I want something like a dropdown menù where every option have country flag and country name, is there something to install that resolve this quickly? Or maybe any example that help me to do on my own

Answer 1

I needed similar functionality.

For this, I created the ngx-flag-picker library.

How to use

Add a link tag with flag-icon-css library to your index.html file.

Add NgxFlagPickerModule to your module in the import section.

After:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ngx-flag-picker
      [selectedCountryCode]="selectedCountryCode"
      [countryCodes]="countryCodes"
      (changedCountryCode)="changeSelectedCountryCode($event)">
    </ngx-flag-picker>
    <h1>{{ selectedCountryCode }}</h1>
  `
})
export class AppComponent {
  selectedCountryCode = 'us';
  countryCodes = ['us', 'lu', 'de', 'bs', 'br', 'pt'];

  changeSelectedCountryCode(value: string): void {
    this.selectedCountryCode = value;
  }
}

Links:

• Npm

• Github

• Demo