Angular - display Enum in select

Assume we have an Enum like this:

export enum Countries {
    Laos = 1,
    Nigeria = 2
}

 To show Enum values in a select (drop down), add this to the component code:

countries = Countries;
keys = function (o: Object) { return Object.keys(o).filter(k => !isNaN(+k)); }

Then in the HTML template:

<select [(ngModel)]="selectedCountry">
    <option *ngFor="let countryVal of keys(countries)" [ngValue]="countryVal">
    {{countries[+countryVal]}}
    </option>
</select>


Post a Comment

Previous Post Next Post