Hello Devs,

In this tutorial, we are going to see example of material select dropdown angular 10.

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

Follow this step by step guide given below:




Create New App

ng new app-material



Add Material Design

ng add @angular/material
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: 'taabish'},

    {value: '3', viewValue: 'solemon'}

  ];

}



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: 'HDTuto.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);

  }

}


Run this command:

ng serve


I hope this example helps you.