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

tobias47n9e · Accepted Answer · 2019-04-09 09:41:47Z

40

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>

edited Apr 9, 2019 at 9:41

tobias47n9e

2,2513 gold badges30 silver badges57 bronze badges

answered Oct 26, 2017 at 21:16

jkyoutsey

2,0612 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ferran Maylinch Over a year ago

Does anyone know if you could do something like MyEnum: Enum<MyEnum> = MyEnum to pass the enum type-safely?

jkyoutsey Over a year ago

@FerranMaylinch I don't think that's necessary as you can just do MyEnum = MyEnum; now and it compiles just fine. Must have changed around Angular 8's version of TS.

Eleomosynator Over a year ago

MyEnum: typeof MyEnum = MyEnum; :)

Juan Ignacio Avendaño Huergo Over a year ago

Does typeof MyEnum makes sense? It returns object. Is it different than set to any?

jkyoutsey Over a year ago

@JuanIgnacioAvendañoHuergo Actually you can just do MyEnum = MyEnum. There isn't much point to typing this beyond that.

|

tobias47n9e · Accepted Answer · 2019-03-21 19:27:01Z

SectionType can't be used directly within the template. Either you set it to a property of your component, either you add specify methods to check:

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

or

@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>
      (...)
    </ul>`
  })
  export class TestComponent{
    activeSection: SectionType = SectionType.Primary;
    setActiveSection(section: SectionType) {
      this.activeSection = section;
    }
    SectionType:SectionType = SectionType;
  }

First solution may work but what about (click)="setActiveSection(SectionType.Primary)" and second solution SectionType: SectionType = SectionType; is giving error Type 'typeof SectionType' is not assignable to type 'SectionType'
I works with SectionType:any = SectionType;. See this plunkr: plnkr.co/edit/Mos2zocjWxiYx5rnY4PI?p=preview.
The line SectionType:SectionType = SectionType is wrong because SectionType is not of type SectionType, it's actually an enum. In Java it would be something like SectionType: Enum< SectionType> but I guess in TypeScript you can't do that. I suspect that this is a limitation, since you cannot use enum types correctly from a template (I mean the type itself, not the values). :/
SectionType: typeof SectionType = SectionType; also works.

Collectives™ on Stack Overflow

How to use enum in Angular 2 templates

2 Answers 2

7 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Linked

Related