{

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


Angular populate enum data in 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 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 to you about how to populate enum string or numbers in 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/[email protected]
npm install @angular/[email protected]

This adds the following entries as a dependencies 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

In mat-select is used for dropdown in 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 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>

Stackblitz angular enum dropdown example

example code is available at angular dropdown based on enum stackblitz

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.