Hello Devs,

In this tutorial, we will learn Angular 9 Material Select Dropdown | mat-select in Angular

In this section, we will create material select dropdown in angular 6, angular 7, angular 8 and angular 9.

Follow this step by step guide below. 



Create New App

ng new app-material


Add Material Design

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


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: 'rathorji.in'},

    {value: '2', viewValue: 'rathorji.in'},

    {value: '3', viewValue: 'rathorji.in'}

  ];

}



Example 2: Material Select Dropdown with Reactive Form


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 - rathorji.in</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: 'rathorji.in'},

    {value: '2', viewValue: 'rathorji.in'},

    {value: '3', viewValue: 'rathorji.in'}

  ];

  

  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);

  }

}


run by following command:

ng serve


May this example help you.