title: How to access an enum value in an Angular 5 view
body: <p>I am currently referencing the <code>enum</code> int value directly in my <code>html</code> view, but I would prefer to reference by the enum name - for example, as I do in TypeScript code</p>
  
  <pre><code> if (this.nodeType === NodeType.HostService) {
        ...
   }
  </code></pre>
  
  <p>I have an enum defined as:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export enum NodeType {
      Location,
      Host,
      HostAccessPoint,
      HostStorage,
      HostService
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>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 <code>enum</code> value:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal-body"&gt;
        &lt;config-edit-storage-node *ngIf="selectedNode &amp;&amp; selectedNodeTypeEnum===3" 
                          [node]="selectedNode" [nodeType]="selectedNodeTypeEnum" 
                          (cancelEdit)="cancelEdit()" (saveEdit)="onSaveEdit($event)"&gt;
          &lt;/config-edit-storage-node&gt;
          
          &lt;config-edit-service-node *ngIf="selectedNode &amp;&amp; selectedNodeTypeEnum===4"
                          [node]="selectedNode" [nodeType]="selectedNodeTypeEnum" 
                          (cancelEdit)="cancelEdit()" (saveEdit)="onSaveEdit($event)"&gt;
          &lt;/config-edit-service-node&gt;
          
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my component I'm setting <strong>that.selectedNodeTypeEnum</strong> :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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];
    
    }
    ...
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Bottom line is that I would rather use this style of coding in the html:</p>
  
  <pre><code>*ngIf="selectedNode &amp;&amp; selectedNodeTypeEnum===NodeType.HostService"
  </code></pre>
  
  <p>as opposed to referencing the enum int vaue itself.</p>
  
  <p>Can it be done ?</p>
  
  <p>thanks and regards.</p>