Pass enums in angular2 view templates
Create an Enum
:
enum ACTIVE_OPTIONS {
HOME = 0,
USERS = 1,
PLAYERS = 2
}
Create a component, be sure your enum list will have the typeof:
export class AppComponent {
ACTIVE_OPTIONS = ACTIVE_OPTIONS;
active: ACTIVE_OPTIONS;
}
Create a template:
<li [ngClass]="{ 'active': active === ACTIVE_OPTIONS.HOME }">
<a routerLink="/in">
<i class="fa fa-fw fa-dashboard"></i> Home
</a>
</li>
If you want get Enum name :
export enum Gender {
Man = 1,
Woman = 2
}
then in component file
public gender: typeof Gender = Gender;
in template
<input [value]="gender.Man" />
Create a property for your enum on the parent component to your component class and assign the enum to it, then reference that property in your template.
export class Parent {
public dropdownTypes = DropdownType;
}
export class Dropdown {
@Input() public set dropdownType(value: any) {
console.log(value);
};
}
This allows you to enumerate the enum as expected in your template.
<div class="Dropdown" [dropdownType]="dropdownTypes.instrument"></div>
Maybe you don't have to do this.
For example, in Numeric Enum:
export enum DropdownType {
instrument = 0,
account = 1,
currency = 2
}
In HTML Template:
<div class="Dropdown" [dropdownType]="1"></div>
result:
dropdownType == DropdownType.account
or String Enum:
export enum DropdownType {
instrument = "instrument",
account = "account",
currency = "currency"
}
<div class="Dropdown" [dropdownType]="'currency'"></div>
result:
dropdownType == DropdownType.currency
If you want get Enum name :
val enumValue = DropdownType.currency
DropdownType[enumValue] // print "currency", Even the "numeric enum" is also.