How to populate enum object data in a dropdown in angular| Angular material dropdown example

How to populate enum object data in a dropdown in angular| Angular material dropdown example

Enum is a collection of constants.

Sometimes, We have an enum object and need to pull all enum values populated in the Select/dropdown of an angular application.

This tutorial talks about step by step tutorial about angular dropdown with values from enum constants.

Let’s declare an enum type in typescript for this examples

export enum Weeks {
  MONDAY = 1,
  TUESDAY= 2,
  WEDNESDAY = 3,
  THURSDAY = 4,
  FRIDAY = 5,
  SATURDAY= 6,
  SUNDAY= 7,
}

This post will talk to you about how to populate enum string or numbers in the HTML select/dropdown of an angular application

  • Angular Material dropdown with enum datatype
  • Html select with Enum values

Angular Material dropdown based on enum values

Install angular material npm in your application as described

npm install @angular/material@13.0.2
npm install @angular/code@13.0.2

This adds the following entries as a dependency in package.json

"@angular/material":"13.0.2",
"@angular/cdk":"13.0.2",

Import MatSelectModule into your module MatSelectModule contains select dropdown-related classes and directives, which can be used in angular components.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
import { MatSelectModule } from "@angular/material/select";

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, MatSelectModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Enum objects prints the following format of data for Weeks enum object

{
  '1': 'MONDAY',
  '2': 'TUESDAY',
  '3': 'WEDNESDAY',
  '4': 'THURSDAY',
  '5': 'FRIDAY',
  '6': 'SATURDAY',
  '7': 'SUNDAY',
  MONDAY: 1,
  TUESDAY: 2,
  WEDNESDAY: 3,
  THURSDAY: 4,
  FRIDAY: 5,
  SATURDAY: 6,
  SUNDAY: 7
}

In Typescript component code, Enum is iterated using the object keys method. This method filters the enum numbers and returns only strings to populate in the dropdown. The same logic can be written in the constructor.

We have also an event handler for the change1() method for tracking selected values in the dropdown.

import { Component } from "@angular/core";
import { Weeks } from "./Weeks";
import { FormGroup, FormControl } from "@angular/forms";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  week1 = null;
  weeks = Weeks;
  enumKeys = [];
  constructor() {
    this.enumKeys = Object.keys(this.weeks).filter((f) => !isNaN(Number(f)));
  }
  change1(value: string) {
    this.week1 = this.weeks[value];
  }
}

HTML Template components:

Mat-select is used for dropdown in the HTML template.

mat-option added with ngFor directive to iterate the keys of an Enum object ngModel is for two-way binding from component to view for a selected dropdown value.

<mat-form-field>
  <mat-select placeholder="Select Week" [(ngModel)]="week1">
    <mat-option *ngFor="let name of enumKeys" [value]="name">
      {{weeks[name]}}
    </mat-option>
  </mat-select>
</mat-form-field>
<br /><br />
<br />
Selected value is {{week1}}

how to select the dropdown value of the enum data

The same typescript component can be used.

And the HTML template for the plain select tag is used.

Applied the ngFor directive on plain HTML select to iterate all the enumKeys

<div>
  <select (change)="change($event.target.value)">
    <option>Please Select Week</option>
    <option *ngFor="let name of enumKeys" [value]="name">
      {{weeks[name]}}
    </option>
  </select>
</div>

Stackblitz angular enum dropdown example

example code is available at angular dropdown based on enum stackblitz🔗