current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 15 down vote favorite
1

The Typescript enum seems a natural match with Angular2's ngSwitch directive. But when I try to use an enum in my component's template, I get "Cannot read property 'xxx' of undefined in ...". How can I use enum values in my component template?

Please note that this is different from how to create html select options based upon ALL of the values of an enum (ngFor). This question is about ngSwitch based upon a particular value of an enum. Although the same approach of creating an class-internal reference to the enum appears.

share|improve this question
    
Possible duplicate of Select based on enum in Angular2 – Günter Zöchbauer Mar 7 at 6:02
    
I don't think that these questions are duplicates; the other one is asking how to create HTML select options based upon ALL of the values of an enum (ngFor), whereas this one is about ngSwitch based upon a particular value of an enum. Although the same approach of creating an class-internal reference to the enum appears. Thank you for pointing out the similarity. – Carl G Mar 7 at 18:20
up vote 21 down vote accepted

You can create a reference to the enum in your component class (I just changed the initial character to be lower-case) and then use that reference from the template (plunker):

import {Component} from 'angular2/core';

enum CellType {Text, Placeholder}
class Cell {
  constructor(public text: string, public type: CellType) {}
}
@Component({
  selector: 'my-app',
  template: `
    <div [ngSwitch]="cell.type">
      <div *ngSwitchWhen="cellType.Text">
        {{cell.text}}
      </div>
      <div *ngSwitchWhen="cellType.Placeholder">
        Placeholder
      </div>
    </div>
    <button (click)="setType(cellType.Text)">Text</button>
    <button (click)="setType(cellType.Placeholder)">Placeholder</button>
  `,
})
export default class AppComponent {

  // Store a reference to the enum
  cellType = CellType;
  public cell: Cell;

  constructor() {
    this.cell = new Cell("Hello", CellType.Text)
  }

  setType(type: CellType) {
    this.cell.type = type;
  }
}
share|improve this answer
1  
In Angular2 RC3 *ngSwitchWhen is deprecated and replaced with *ngSwitchCase. You will get a warning '*ngSwitchWhen is deprecated and will be removed. Use *ngSwitchCase instead' – kmcnamee Jul 5 at 21:59
up vote 6 down vote

as of rc.6 / final

...

export enum AdnetNetworkPropSelector {
    CONTENT,
    PACKAGE,
    RESOURCE
}

<div style="height: 100%">
          <div [ngSwitch]="propSelector">
                 <div *ngSwitchCase="adnetNetworkPropSelector.CONTENT">
                      <AdnetNetworkPackageContentProps [setAdnetContentModels]="adnetNetworkPackageContent.selectedAdnetContentModel">
                                    </AdnetNetworkPackageContentProps>
                  </div>
                 <div *ngSwitchCase="adnetNetworkPropSelector.PACKAGE">
                </div>
            </div>              
        </div>


export class AdnetNetwork {       
    private adnetNetworkPropSelector = AdnetNetworkPropSelector;
    private propSelector = AdnetNetworkPropSelector.CONTENT;
}
share|improve this answer
    
What has changed? – Carl G Sep 7 at 0:43
    
replaced with ngSwitchCase – born2net Sep 7 at 12:36
    
Ah, okay. Thanks! – Carl G Sep 8 at 16:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.