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: https://stackoverflow.com/questions/18111657/how-does-one-get-the-names-of-typescript-enum-entries — Z. Bagley, May 15 '18 at 18:55

ConnorsFan · Answer 1 · 2019-06-14T14:28:13.240

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 '19 at 14:28

answered May 15 '18 at 18:57

ConnorsFan

70,558
13
122
146

No, I can't get that to work. I need to debug further. I also tried the other poster's suggestion `NodeType[NodeType.HostService]` – bob.mazzo May 15 '18 at 19:15
3

It's such a habit to use : I think everyone is overlooking the =. TY – Mark McCorkle Dec 18 '18 at 14:56
I also have not been able to use an exported enum for conditional checks in the view. It works for sure if defined in the view directly. But @bob.mazzo has exported the enum. – SQueek Feb 15 '19 at 10:51
1

@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](https://angular.io/guide/template-syntax#expression-context) of the template is the component instance. – ConnorsFan Feb 15 '19 at 12:08
@connorsfan I did it like you explained before, but for me it has not worked. Can you please adjust your Stackblitz so that the enum is exported and is not defined within the component class? Would be cool if it works. – SQueek Feb 16 '19 at 13:10
1

@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](https://stackblitz.com/edit/angular-r6f9bq?file=app%2Fapp.component.ts) to show how it works when the enum is declared in a separate file. – ConnorsFan Feb 16 '19 at 13:46
Great, thanks a lot for helping and providing immediate support. I would flag your answer as the correct one. – SQueek Feb 17 '19 at 14:44
This works well, but just a note that this will only work if the export enum is NOT defined as a const. – Justin Feb 11 '21 at 18:40
Awesome! I have a `BaseComponent` class that I have put it in, and now it works in all my components. – Jeppe Apr 03 '22 at 11:10

WasiF · Answer 2 · 2020-04-12T11:15:03.910

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 '20 at 11:15

answered Oct 10 '18 at 06:34

WasiF

26,101
16
120
128

score 3 · Answer 3 · answered Sep 24 '18 at 13:19

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
}

How to access an enum value in an Angular 5 view

3 Answers3

Linked

Related