Angular Material Select Box | Angular 9/8 mat-select Reactive Form Example

Hi Dev,

In this article we will lean angular material select dropdown example. if you want to see example of angular material mat-select reactive form then you are a right place.

I’m going to show you about angular material mat selection list reactive form. if you have question about angular material select list example then i will give simple example with solution.

We can create material select dropdown in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13.

I will give you two simple example with angular:

1) Basic Material Select Dropdown

2) Material Select Dropdown with Reactive Form

You can see bellow layout for demo:

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new app-material

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Example 1: Basic Material Select Dropdown

Here, we will create very simple example. first we need to import MatSelectModule for mat-select material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import {MatSelectModule} from '@angular/material/select';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSelectModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h4>Angular Basic mat-select Example</h4>
<mat-form-field>
  <mat-label>Select Website</mat-label>
  <mat-select>
    <mat-option *ngFor="let website of websites" [value]="website.value">
      {{website.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

src/app/app.component.ts

import { Component } from '@angular/core';
  
interface Website {
  value: string;
  viewValue: string;
}
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-material3';
  
  websites: Website[] = [
    {value: '1', viewValue: 'ItSolutionStuff.com'},
    {value: '2', viewValue: 'HDTuto.com'},
    {value: '3', viewValue: 'Nicesnippets.com'}
  ];
}

Example 2: Material Select Dropdown with Reactive Form

Here, we will create very simple example using reactive form. first we need to import MatSelectModule, MatButtonModule, FormsModule and ReactiveFormsModule for mat-select material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';
import {MatButtonModule} from '@angular/material/button';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h1>Angular Material Select Box Example - ItSolutionStuff.com</h1>
    
<form [formGroup]="form" (ngSubmit)="submit()">
  <mat-form-field>
    <mat-label>Select Website</mat-label>
    <mat-select formControlName="website">
      <mat-option *ngFor="let website of websites" [value]="website.value">
        {{website.viewValue}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="form.get('website').hasError('required')">
        Please select website
    </mat-error>
  </mat-form-field>
    
  <button mat-raised-button color="accent">Submit</button>
</form>

src/app/app.component.ts

import { Component } from '@angular/core';
  
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
  
interface Website {
  value: string;
  viewValue: string;
}
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-material2';
  
  websites: Website[] = [
    {value: '1', viewValue: 'ItSolutionStuff.com'},
    {value: '2', viewValue: 'HDTuto.com'},
    {value: '3', viewValue: 'Nicesnippets.com'}
  ];
  
  form: FormGroup = new FormGroup({});
  
  constructor(private fb: FormBuilder) {
  
    this.form = fb.group({
      website: ['', [Validators.required]],
    })
  }
   
  get f(){
    return this.form.controls;
  }
    
  submit(){
    console.log(this.form.value);
  }
}

You can easily run by following command:

ng serve

I hope it can help you...