Angular Material - Select

The <mat-select>, an Angular Directive, is used for <select> for enhance material design based styling..

In this chapter, we will showcase the configuration required to draw a select control using Angular Material.

Create Angular Application

Follow the following steps to update the Angular application we created in Angular Material - First Application chapter −

app.ts

Following is the content of the modified app.ts.

import { Component, signal } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';

export interface Food {
  value: string;
  display: string;
}

@Component({
   selector: 'app-root',
   imports: [
      FormsModule,
      MatFormFieldModule,
      MatSelectModule,
      ReactiveFormsModule,
   ],
   templateUrl: './app.html',
   styleUrl: './app.css'
})
export class App {
   protected readonly title = signal('material-app');
   selectedValue: string=''; 
   foods: Food[] = [
      {value: 'steak', display: 'Steak'},
      {value: 'pizza', display: 'Pizza'},
      {value: 'tacos', display: 'Tacos'}
   ];
}

app.html

Following is the content of the modified HTML host file app.html.

<form>
   <h4>mat-select</h4>
   <mat-form-field>
      <mat-select placeholder = "Favorite food" 
         [(ngModel)] = "selectedValue" name = "food">
         @for (food of foods; track food) {
            <mat-option [value] = "food.value">{{food.display}}</mat-option>
         }
      </mat-select>
   </mat-form-field>
   <p> Selected food: {{selectedValue}} </p> 
</form>

Result

Verify the result.

Details

• As first, we've created a select using mat-select bound with ngModel.

• Then, we've added options using mat-option.