Pass enums in angular2 view templates Pass enums in angular2 view templates angular angular

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>


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>


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" />