The angular material dropdown input or Angular material select component provides material design style and allows us to select an item from the drop-down list. An Angular material is an amazing UI and built specifically for Angular framework, it has lots of pre-built components like card, modal, more, and Angular material select is one of them.
In this article, we explore how to implement Angular material select component , how we can use material select in Angular form. At last we’ll learn how to use its attributes.

Table of Contents
Step 1 : Setup and configure Angular material dropdown project
Let first create an Angular material select project, we need to install the angular material library.
ng new matSelectApp
cd new matSelectApp
ng add @angular/material
Angular material select component allows us to select single or multiple items among lists of related options. It provides select option functionality with Material Design look and feels.
To use the material select component, we need to import MatSelectModule in our app module. We also need material input and form-field to use Angular material dropdown in form. The material select component is wrapped inside the mat-form-field component. Let import it in our app.component.ts file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
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 { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 2 : Angular material select example
Let first demonstrate a basic example of the material select component. We had already Let take a basic example screenshot.

Let add our first Angular material drop example in the app.component.html template.
<section>
<mat-form-field appearance="outline">
<mat-label>Selected Framwork</mat-label>
<mat-select [formControl]="selectedFW">
<mat-option *ngFor="let framwork of frameworks" [value]="framwork">
{{ framwork }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
We need to add frameworks array object and need to define formControl in our component typescript.
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
selectedFW = new FormControl();
frameworks: string[] = ['Angular', 'Reactjs', 'Vue'];
}
Angular material select component, sub-components and attributes
Angular material select components have subcomponents and attributes, which makes the dropdown list and we can add attributes like multiple on it.
Name | Description |
mat-select | The mat-select is a root container containing a list of options. We can add data binding and formControl on it. |
mat-option | Sub-component of mat-select and we add individual option item of unique value on it. |
mat-optgroup | Optional sub-component of mat-select and we can group related options. |
mat-select-trigger | It is an optional sub-component of mat-select, it adds a custom trigger label that can be different from mat-option. |
multiple | This attribute adds multiple selection options on the Angular material dropdown list. |
Example of Angular mat-select-trigger sub-component
We have demonstrated an example of the mat-select-trigger component in our first example.

In the previous example, both option and selected label on select input are the same but in the case of mat-select-trigger, we can have a different label on option and trigger label. When we select the Angular option but when we select it will display Angular- 12 and let us edit the app component template.
<section>
<mat-form-field appearance="outline">
<mat-label>mat-select-trigger example</mat-label>
<mat-select [formControl]="selectedFW">
<mat-select-trigger>
{{ selectedFW.value ? selectedFW.value : ''}}
<span *ngIf="selectedFW.value">
<span *ngIf="selectedFW.value[0] == 'A'">
- 12
</span>
<span *ngIf="selectedFW.value[0] == 'R'">
- 17
</span>
<span *ngIf="selectedFW.value[0] == 'V'">
- 3
</span>
</span>
</mat-select-trigger>
<mat-option *ngFor="let framwork of frameworks" [value]="framwork">
{{ framwork }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
Adding multiple attribute on mat-select
Angular material dropdown we can select multiple elements by adding multiple attributes on a mat-select component. Let edit our previous example code in app component template.

<section>
<mat-form-field appearance="outline">
<mat-label>Selected Framwork</mat-label>
<mat-select [formControl]="selectedFW" multiple>
<mat-option *ngFor="let framwork of frameworks" [value]="framwork">
{{ framwork }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
Angular material select grouping
Material selection has the mat-optgroup sub-component which allows us to group the option items. We have used this optional sub-component to group periodic table elements into different groups like Alkaline Earth Metals and Transition Metals and let us edit our components.

<section>
<h2>Angular material select group option</h2>
<mat-form-field appearance="outline">
<mat-label>Periodic Table</mat-label>
<mat-select placeholder="Periodic table"
[(value)]="selectedElementGroup" multiple>
<mat-option>None</mat-option>
<mat-optgroup label="Alkaline Earth Metals">
<mat-option value="Be">Beryllium</mat-option>
<mat-option value="Ca">Calcium</mat-option>
<mat-option value="Mn">Magnesium</mat-option>
</mat-optgroup>
<mat-optgroup label="Transition Metals">
<mat-option value="Au">Gold</mat-option>
<mat-option value="Ag">Silver</mat-option>
<mat-option value="Cu">Copper</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
<p><b>Selected group elements : {{ selectedElementGroup }}</b></p>
</section>
.....
export class AppComponent {
selectedElementControl = new FormControl();
selectedElementGroup: string[] = [];
}
Adding Angular material dropdown in form
Let add our material select component in our Angular template and reactive form. Here is a screenshot of our example.

<section>
<h2>Mat select in Modal Form</h2>
<mat-form-field appearance="outline">
<mat-select name="periodicElement"
[(value)]="selectedElement" placeholder="Periodic Element">
<mat-option [value]="'Ca'">Calcium</mat-option>
<mat-option [value]="'Cu'">Copper</mat-option>
<mat-option [value]="'H'">Hydrogen</mat-option>
<mat-option [value]="'Li'">Lithium</mat-option>
<mat-option [value]="'O'">Oxygen</mat-option>
<mat-option [value]="'T'">Titanium</mat-option>
</mat-select>
</mat-form-field>
<p><b>Selected: </b>{{ selectedElement }}</p>
</section>
<section>
<h2>Mat select in Reactive form</h2>
<mat-form-field appearance="outline">
<mat-select name="periodicElement"
[formControl]="selectedElementControl" placeholder="Periodic Element">
<mat-option [value]="'Ca'">Calcium</mat-option>
<mat-option [value]="'Cu'">Copper</mat-option>
<mat-option [value]="'H'">Hydrogen</mat-option>
<mat-option [value]="'Li'">Lithium</mat-option>
<mat-option [value]="'O'">Oxygen</mat-option>
<mat-option [value]="'T'">Titanium</mat-option>
</mat-select>
</mat-form-field>
<p><b>Selected: </b>{{ selectedElementControl.value }}</p>
</section>
.....
export class AppComponent {
selectedElement: string = "Ca";
selectedElementControl = new FormControl();
selectedElementGroup: string[] = [];
}
Conclusion
We have completed our Angular material dropdown component. We can use multiple attributes to select multiple items from a list.
Related Articles
- How to install Angular material ?
- How to implement Angular material form in Angular 11 | 12?
- How to implement Angular material table in Angular 12 .?
- How to implement angular material datepicker in Angular 12 .?
- How to implement Angular material grid .?
- How to implement angular material list in Angular 12 .?
- How to implement Angular material card in Angular 12.?
- How to implement Angular material dialog .?