angular2 bootstrap4 country select menu

country-select.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

import * as iso3166 from 'iso-3166-2/iso3166.min';

@Component({
  selector: 'app-country-select',
  template: `
    <select name="theme" [class]="'form-control' + (size ? ' form-control-' + size : '')"
      [ngModel]="countryIsoCode" (ngModelChange)="change($event)">
      <option *ngFor="let country of countries" [ngValue]="country.value">{{country.display}}</option>
    </select>
  `
})
export class CountrySelectComponent {
  @Input()
  public countryIsoCode: string;
  @Input()
  public size: 'sm' | 'lg';
  @Output()
  public countryIsoCodeChange = new EventEmitter();
  
  public countries: any[] = [];
  
  constructor() {
    for (const key of Object.keys(iso3166.data)) {
      this.countries.push({ display: iso3166.data[key].name, value: key.toLowerCase() });
    }
    this.countries.sort((a: any, b: any) => a.display.localeCompare(b.display));
  }
  
  public change(newValue: string): void {
    this.countryIsoCode = newValue;
    this.countryIsoCodeChange.emit(newValue);
  }
  
}

based on iso-3166-2 npm modul