title: How to Compare and access the enum variable in Angular 8+ HTML Template?
body: <p>I have created a <a href="https://stackblitz.com/edit/angular-dqgxno" rel="nofollow noreferrer">stackblitz example</a> of my problem,</p>
  
  <p>I want only 1 mode at a time to be visible either </p>
  
  <ul>
  <li>Draw Mode</li>
  <li>Zoom Mode</li>
  <li>Click Mode</li>
  </ul>
  
  <p>But I am unable to do comparison and zoom mode doesn't appear on clicking the button</p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  
  export enum Mode {
    DRAW,
    ZOOM,
    CLICK
  }
  
  @Component({
    selector: 'hello',
    template: `&lt;h1&gt;Hello {{name}}!&lt;/h1&gt;
    &lt;h1&gt;Draw Mode&lt;/h1&gt;
    &lt;h1 *ngIf = "mode === Mode.ZOOM"&gt;Zoom Mode&lt;/h1&gt;
    &lt;h1&gt;Click Mode&lt;/h1&gt;
  
    &lt;button (click)="setZoomMode()"&gt; Zoom Mode&lt;/button&gt;
    `,
    styles: [`h1 { font-family: Lato; }`]
  })
  export class HelloComponent implements OnInit {
    @Input() name: string;
    mode: Mode;
  
  
    ngOnInit() {
      this.mode = Mode.CLICK;
    }
    setZoomMode() {
      this.mode = Mode.ZOOM;
    }
  
  
  }
  </code></pre>