How to populate enum data in HTML select/dropdown in angular material


We need to populate Enum values populated in the Select/dropdown of an angular application.

Let declare 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 you about how to populate enum string or numbers in HTML select 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 applicaiton as described package.json

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

Import MatSelectModule into your module MatSelectModule contains select dropdown related classes, 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 followin 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 are iterated using `object.keys` method
This method filters the enum numbers and returns only strings to populate in dropdown
The same logic can be written in constructor.

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

```javascript
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 used mat-select for dropdown  mat-option added with ngFor directive to iterate the keys  ngModel is for two way binding for 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>
<br>
Selected value is {{week1}}

select element populate enum data.

The same typescript component can be used

And the HTML template for the plain select tag is used

Applied 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>

example code is available at angular dropdown based on enum stacblitz

Similar Posts