How to implement Angular material dropdown

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

Spread the love

How to implement Angular material dropdown | select .?