Select based on enum in Angular2

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(...)

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?

Here is a very straightforward way for Angular2 v2.0.0. For completeness sake, I have included an example of setting a default value of the country select via reactive forms.

@Component({  selector: 'my-app',  providers: [],  template: `    <div>      <select id="country" formControlName="country">        <option *ngFor="let key of keys" [value]="key">{{countries[key]}}</option>      </select>    </div>  `,  directives: []})export class App {  keys: any[];  countries = CountryCodeEnum;  constructor(private fb: FormBuilder) {    this.keys = Object.keys(this.countries).filter(Number);    this.country = CountryCodeEnum.Belgium; //Default the value  }}