How to pass enum to values to a dropdown in template [Angular]

Question

I've recently started with typescript. I've created a dropdown using select and option tags in the template.

<select [(ngModel)]="primaryMode" (ngModelChange)="primaryModeChangeHandler($event)">
  <option *ngFor="let mode of modes" [value]="mode">{{mode}}</option>
</select>

and in typescript I was having an array:

modes= ['Calendar Year', 'Year-to-date', 'Rolling Year', 'Custom'];

But my tech lead said that I've to use enum instead of array. Here's my code now:

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);    
  }
}

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 stackblitz. Please correct me where I'm wrong.

Barremian · Accepted Answer · 2020-06-01 06:46:08Z

3

String enums require a key and a value. And enums are used to create named constants, they don't produce a list. So you still need an array, but created from the values of the enum.

Controller

enum PresetRange {
  CalendarYear = 'Calendar Year',
  YearToDate = 'Year-to-date',
  RollingYear = 'Rolling Year',
  CustomRange = 'Custom'
}

@Component({
  selector: 'app-timeselector',
  templateUrl: './timeselector.component.html',
  styleUrls: ['./timeselector.component.css']
})
export class TimeselectorComponent implements OnInit {
  primaryMode: any;
  modesLabels = [                        // <-- you still need the array
    PresetRange.CalendarYear, 
    PresetRange.YearToDate, 
    PresetRange.RollingYear,
    PresetRange.CustomRange 
  ];

  constructor() { }

  ngOnInit() {
  }

  primaryModeChangeHandler(event) {
    console.log(this.primaryMode);    
  }
}

Template

<select [(ngModel)]="primaryMode" (ngModelChange)="primaryModeChangeHandler($event)">
  <option *ngFor="let label of modesLabels" [value]="label">{{label}}</option>
</select>

I've modified your Stackblitz

edited Jun 1, 2020 at 6:46

answered Jun 1, 2020 at 6:40

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tanzeel Over a year ago

Actually this is what my tech lead said: "Pass enums as value and modesLabels(say) as display strings to option in your dropdown".

Barremian Over a year ago

He/she meant you to rename modes variable as modesLabels. I've edited the answer.

Tanzeel Over a year ago

Well, my tech lead is a lady. She told me to make those changes. But anyway, this solution is correct. Let me show this to her. :-)

Cagri Tacyildiz Over a year ago

I wonder if there is 100 enum types , will you write 100 times there ?

Barremian Over a year ago

This is an enum for a drop down list. If the list is going to contain 100 options, then they might be initialized differently. But at the moment, writing clear code is better than writing for the future (that might never occur).

|

Cagri Tacyildiz · Accepted Answer · 2020-06-01 06:48:41Z

3

Demo You can use Object.keys for this or you can write custom pipeline for this.

In component

  modes =[];
  enums = presetRange 

  constructor() {this.modes= Object.keys(this.enums).filter(Number) }

in html

<select [(ngModel)]="primaryMode" (ngModelChange)="primaryModeChangeHandler($event)">
  <option *ngFor="let key of modes" [value]="key" >{{enums[key]}}</option>
</select>

answered Jun 1, 2020 at 6:48

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to pass enum to values to a dropdown in template [Angular]

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related