You can create a custom decorator to add to your component to make it aware of enums.
myenum.enum.ts:
export enum MyEnum {
FirstValue,
SecondValue
}
myenumaware.decorator.ts
import { MyEnum } from './myenum.enum';
export function MyEnumAware(constructor: Function) {
constructor.prototype.MyEnum = MyEnum;
}
enum-aware.component.ts
import { Component } from '@angular2/core';
import { MyEnum } from './myenum.enum';
import { MyEnumAware } from './myenumaware.decorator';
@Component({
selector: 'enum-aware',
template: `
<div [ngSwitch]="myEnumValue">
<div *ngSwitchCase="MyEnum.FirstValue">
First Value
</div>
<div *ngSwitchCase="MyEnum.SecondValue">
Second Value
</div>
</div>
<button (click)="toggleValue()">Toggle Value</button>
`,
})
@MyEnumAware // <---------------!!!
export default class EnumAwareComponent {
myEnumValue: MyEnum = MyEnum.FirstValue;
toggleValue() {
this.myEnumValue = this.myEnumValue === MyEnum.FirstValue
? MyEnum.SecondValue : MyEnum.FirstValue;
}
}
There is a caveat when dealing with ngIf
and a pipe, and honestly I don't know why this is the case right now (probably something to do with how the template is expanded), but you have to use this.<enum type>.<enum value>
e.g. assume myEnumValue
, above is actually an Observable<MyEnum>
, and I want to pipe it through async
, I could use it in an ngIf
like this...
*ngIf="(myEnumValue | async) === this.MyEnum.FirstValue"
This doesn't seem to be the case with ngSwitch
. i.e. the following works
<div [ngSwitch]="myEnumValue | async">
<div *ngSwitchCase="MyEnum.FirstValue">
First Value
</div>
<div *ngSwitchCase="MyEnum.SecondValue">
Second Value
</div>
</div>