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 and angular 11.
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...

My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
- Angular Radio Button On Change Event Example
- How to add on Change Event on Dropdown in Angular?
- Angular Radio Button with Reactive Form Tutorial
- Angular 9/8 Radio Button Example
- Angular Select Dropdown with Reactive Form
- Angular Material Datepicker Example
- How to install material design in Angular 9/8?
- Vue JS Get Checked Radio Button Value on Onchange Event