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

By Hardik Savani | March 18, 2020 | Category : Angular


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

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




Hardik Savani
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.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: