How to use enum in Angular 2 templates

Question

I am trying to use enum in angularjs 2 templates. Below is my code

@Component({     selector: 'test',     template: ` <ul class="nav navbar-nav">     <li class="{{activeSection == SectionType.Primary ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li>     <li class="{{activeSection == SectionType.Aditional ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Aditional)">Additional Details</a></li>     <li class="{{activeSection == SectionType.Payment ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Payment)">Payment Settings </a></li>              </ul>`   })   export class TestComponent{   activeSection: SectionType = SectionType.Primary;    setActiveSection(section: SectionType) {         this.activeSection = section;     } } 

here is my enum:

enum SectionType {     Primary,     Aditional,     Payment } 

It is throwing EXCEPTION: TypeError: Cannot read property 'Primary' of undefined

Answer 1

The simple way to use an Enum in a template is

@Component(...) export class MyComp {   public MyEnum: any = MyEnum; } 

Then in template:

<select>   <option value="MyEnum.ValueA">Value A</option> </select>