Dienstag, 9. August 2016

Angular2: How to use an enum in a view template

A TypeScript enum can be used in an Angular2 template by aliasing the type in the component. Thus it is known when binding the model. Otherwise it is recognized as string literal.
import {Component} from '@angular/core';
import {SexEnum} from '../shared/models/sex.enum';
import {RadioButton} from 'primeng/components/radiobutton/radiobutton';

@Component({
      selector: 'some-form',
      template: `
<div class="ui-grid-col-8">
   <p-radiobutton name="sexGroup" label="Woman" [value]="SexEnum.w" [(ngModel)]="sex" ></p-radiobutton>
   <p-radiobutton name="sexGroup" label="Man"   [value]="SexEnum.m"   [(ngModel)]="sex" ></p-radiobutton>
</div>
`,
     directives: [RadioButton]
})
export class SomeFormComponent {
  SexEnum = SexEnum; // Export enum to view
  sex : SexEnum;
}