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.

Answer 1

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.