title: How to pass enum to values to a dropdown in template [Angular]
body: <p>I've recently started with typescript. I've created a dropdown using <code>select</code> and <code>option</code> tags in the template.</p>
  
  <pre><code>&lt;select [(ngModel)]="primaryMode" (ngModelChange)="primaryModeChangeHandler($event)"&gt;
    &lt;option *ngFor="let mode of modes" [value]="mode"&gt;{{mode}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and in typescript I was having an array:</p>
  
  <pre><code>modes= ['Calendar Year', 'Year-to-date', 'Rolling Year', 'Custom'];
  </code></pre>
  
  <p>But my tech lead said that I've to use <code>enum</code> instead of array. Here's my code now:</p>
  
  <pre><code>import { Component, OnInit, ... } from '@angular/core';
  
  export enum presetRange {
      CalendarYear,
      YearToDate,
      RollingYear,
      CustomRange
  }
  
  @Component({
    selector: 'app-timeselector',
    templateUrl: './timeselector.component.html',
    styleUrls: ['./timeselector.component.css']
  })
  export class TimeselectorComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
    primaryMode;
  
    primaryModeChangeHandler(event) {
      console.log(this.primaryMode);    
    }
  }
  </code></pre>
  
  <p>But the problem is that I don't know how to bind dropdown to an enum. I tried few things but I failed. Here's the <a href="https://stackblitz.com/edit/angular-ivy-r8bcby" rel="nofollow noreferrer">stackblitz</a>. Please correct me where I'm wrong.</p>