How to access an enum value in an Angular 5 view

Question

I am currently referencing the enum int value directly in my html view, but I would prefer to reference by the enum name - for example, as I do in TypeScript code

 if (this.nodeType === NodeType.HostService) {
      ...
 }

I have an enum defined as:

export enum NodeType {
    Location,
    Host,
    HostAccessPoint,
    HostStorage,
    HostService
}

and in my html view, I'm loading specific components (which include reactive forms) within a modal as follows - and it all depends up on the enum value:

<div class="modal-body">
      <config-edit-storage-node *ngIf="selectedNode && selectedNodeTypeEnum===3" 
                        [node]="selectedNode" [nodeType]="selectedNodeTypeEnum" 
                        (cancelEdit)="cancelEdit()" (saveEdit)="onSaveEdit($event)">
        </config-edit-storage-node>
        
        <config-edit-service-node *ngIf="selectedNode && selectedNodeTypeEnum===4"
                        [node]="selectedNode" [nodeType]="selectedNodeTypeEnum" 
                        (cancelEdit)="cancelEdit()" (saveEdit)="onSaveEdit($event)">
        </config-edit-service-node>
        
</div>

In my component I'm setting that.selectedNodeTypeEnum :

export class ConfigNetworkTreeComponent implements OnInit {

  selectedNode: INode;
  selectedNodeTypeEnum: NodeType = null;
  selectedNodeTypeStr: string;
  
  setNodeEvents() {
   let selectedObj = that.getSelectedNode(nodeID);        
   that.selectedNode = selectedObj['selectedNode'];						
   that.selectedNodeTypeStr = selectedObj['nodeType'];
   that.selectedNodeTypeEnum = NodeType[that.selectedNodeTypeStr];
  
  }
  ...
}

Bottom line is that I would rather use this style of coding in the html:

*ngIf="selectedNode && selectedNodeTypeEnum===NodeType.HostService"

as opposed to referencing the enum int vaue itself.

Can it be done ?

thanks and regards.

NodeType[NodeType.HostService] see: stackoverflow.com/questions/18111657/… — Z. Bagley
– Z. Bagley, Commented May 15, 2018 at 18:55

Martin Parenteau · Accepted Answer · 2019-06-14 14:28:13Z

28

Since the expression context of the template is the component instance, you should assign the NodeType enum to a property of the component class to make it available in the template:

export class ConfigNetworkTreeComponent {
  public NodeTypeEnum = NodeType;  // Note: use the = operator
  ...
}

You can then use that property in the template to refer to NodeType values:

*ngIf="selectedNode && selectedNodeType === NodeTypeEnum.HostService"

See this stackblitz for a demo.

edited Jun 14, 2019 at 14:28

answered May 15, 2018 at 18:57

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

9 Comments

bob.mazzo Over a year ago

No, I can't get that to work. I need to debug further. I also tried the other poster's suggestion NodeType[NodeType.HostService]

Mark McCorkle Over a year ago

It's such a habit to use : I think everyone is overlooking the =. TY

Martin Parenteau Over a year ago

@SQueek - Exporting the enum is not enough. You have to assign it to a property of the component class to make it available in the template, because the expression context of the template is the component instance.

Martin Parenteau Over a year ago

@SQueek - I had not declared the enum in the component class. It was in the same file but outside of the component class. I modified the stackblitz to show how it works when the enum is declared in a separate file.

Jeppe Over a year ago

Awesome! I have a BaseComponent class that I have put it in, and now it works in all my components.

|

WasiF · Accepted Answer · 2020-04-12 11:15:03Z

9

Simplest way to use enum in HTML with intellisense

Your enum

export enum NodeType {
    Location,
    Host
}

Your component class

export class YourComponent {

    get Node() {
       return NodeType
    }

}

Your component's HTML

<div>{{Node.Location}}</div> // 0
<span *ngIf="Node.Location == 0">Location</span>

edited Apr 12, 2020 at 11:15

answered Oct 10, 2018 at 6:34

WasiF

29.2k16 gold badges130 silver badges137 bronze badges

Comments

Oleksandr Yefymov · Accepted Answer · 2018-09-24 13:19:03Z

3

You can create a method for returning string representation of enum element in your component, like:

getActionName(): string {
    return Action[this.action];
  }

And in html template call it like:

 <button type="submit" [disabled]="!userProfileForm.valid" class="btn btn-danger">
            {{getActionName()}}</button>

When your declared enum is like:

    export enum Action {
  update, create
}

answered Sep 24, 2018 at 13:19

Oleksandr Yefymov

6,5592 gold badges25 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to access an enum value in an Angular 5 view

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related