Select based on enum in Angular2

Question

I have this enum (I'm using TypeScript) :

export enum CountryCodeEnum {     France = 1,     Belgium = 2 } 

I would like to build a select in my form, with for each option the enum integer value as value, and the enum text as label, like this :

<select>      <option value="1">France</option>      <option value="2">Belgium</option> </select> 

How can I do this ?

Answer 1

One more solution if you don't want to create a new pipe. You could also extract keys into helper property and use it:

@Component({   selector: 'my-app',   providers: [],   template: `     <div>       <select>         <option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>       </select>     </div>   `,   directives: [] }) export class App {    countries = CountryCodeEnum    constructor() {     this.keys = Object.keys(this.countries).filter(k => !isNaN(Number(k)));   } } 

Demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

Edit:

if you need the options as numbers instead of strings:

• replace [value] with [ngValue]
• add .map(Number) after .filter(...)

Answer 2

update2 simplified by creating an array

@Pipe({name: 'enumToArray'}) export class EnumToArrayPipe implements PipeTransform {   transform(value) : Object {     return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});   } }  @Component({   ...   imports: [EnumsToArrayPipe],   template: `<div *ngFor="let item of roles | enumToArray">{{item.index}}: {{item.name}}</div>` }) class MyComponent {   roles = Role; } 

update

instead of pipes: [KeysPipe]

use

@NgModule({   declarations: [KeysPipe],   exports: [KeysPipe], } export class SharedModule{} 

@NgModule({   ...   imports: [SharedModule], }) 

original

Using the keys pipe from https://stackoverflow.com/a/35536052/217408

I had to modify the pipe a bit to make it work properly with enums (see also How to get names of enum entries?)

@Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform {   transform(value, args:string[]) : any {     let keys = [];     for (var enumMember in value) {       if (!isNaN(parseInt(enumMember, 10))) {         keys.push({key: enumMember, value: value[enumMember]});         // Uncomment if you want log         // console.log("enum member: ", value[enumMember]);       }      }     return keys;   } }  @Component({ ...   pipes: [KeysPipe],   template: `   <select>      <option *ngFor="let item of countries | keys" [value]="item.key">{{item.value}}</option>   </select> ` }) class MyComponent {   countries = CountryCodeEnum; } 

Plunker

See also How to iterate object keys using *ngFor?