Pass enums in angular2 view templates
EnumsAngularAngular2 TemplateEnums Problem Overview
Can we use enums in an angular2 view template?
<div class="Dropdown" dropdownType="instrument"></div>
passes the string as input:
enum DropdownType {
instrument,
account,
currency
}
@Component({
selector: '[.Dropdown]',
})
export class Dropdown {
@Input() public set dropdownType(value: any) {
console.log(value);
};
}
But how to pass an enum configuration? I want something like this in the template:
<div class="Dropdown" dropdownType="DropdownType.instrument"></div>
What would be the best practice?
Edited: Created an example:
import {bootstrap} from 'angular2/platform/browser';
import {Component, View, Input} from 'angular2/core';
export enum DropdownType {
instrument = 0,
account = 1,
currency = 2
}
@Component({selector: '[.Dropdown]',})
@View({template: ''})
export class Dropdown {
public dropdownTypes = DropdownType;
@Input() public set dropdownType(value: any) {console.log(`-- dropdownType: ${value}`);};
constructor() {console.log('-- Dropdown ready --');}
}
@Component({ selector: 'header' })
@View({ template: '<div class="Dropdown" dropdownType="dropdownTypes.instrument"> </div>', directives: [Dropdown] })
class Header {}
@Component({ selector: 'my-app' })
@View({ template: '<header></header>', directives: [Header] })
class Tester {}
bootstrap(Tester);
Enums Solutions
Solution 1 - Enums
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>
Solution 2 - Enums
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>
Solution 3 - Enums
If you want get Enum name :
export enum Gender { Man = 1, Woman = 2 }
then in component file
public gender: typeof Gender = Gender;
in template
Solution 4 - Enums
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.