Angular Material Select : Custom trigger label

By Arvind Rai, May 13, 2024
In this article, I will create an example to customize trigger label of Angular Material select dropdown using <mat-select-trigger>.

<mat-select-trigger>

<mat-select-trigger> is used to customize trigger label. In select dropdown, trigger label is the label that is displayed when we select an item. By default, the item name is displayed when we select an item. In multiple selection, all the selected items are displayed as comma separated. To customize default behaviour, use <mat-select-trigger>. It is used within <mat-select>.
<mat-select>
  <mat-select-trigger> </mat-select-trigger>
  <mat-option> </mat-option>
  -------
</mat-select> 

Example

<mat-select-trigger> is useful when we use multiple attribute to enable more than one item selection. All the selected items will display comma separated, by default. We will customize it in our example and will display as first selected item (+ number of other selected items).
item.component.html
<h3>With FormControl</h3>
<mat-form-field>
  <mat-label>Select Cities</mat-label>
  <mat-select [formControl]="cities" multiple>
    <mat-select-trigger>
      {{cities.value?.[0] || ''}}
      @if ((cities.value?.length || 0) > 1) {
      (+{{(cities.value?.length || 0) - 1}} {{' more'}})
      }
    </mat-select-trigger>
    @for (city of allCities; track city) {
    <mat-option [value]="city">{{city}}</mat-option>
    }
  </mat-select>
</mat-form-field>

<h3>With FormGroup</h3>
<form [formGroup]="fruitForm" (ngSubmit)="onFormSubmit()">
  <mat-form-field>
    <mat-label>Select Fruits</mat-label>
    <mat-select formControlName="selectedFruit" multiple>
      <mat-select-trigger>
        {{selectedFruitAsArray?.[0]}}
        @if ((selectedFruitAsArray?.length || 0) > 1) {
        (+{{(selectedFruitAsArray?.length || 0) - 1}} {{' more'}})
        }
      </mat-select-trigger>
      @for (fruit of allFruits; track fruit) {
      <mat-option [value]="fruit">{{fruit}}</mat-option>
      }
    </mat-select>
  </mat-form-field>
</form>

{{selectedFruit?.value}} 
item.component.ts
import { Component } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';

@Component({
  selector: 'app-item',
  standalone: true,
  imports: [MatFormFieldModule, MatSelectModule, ReactiveFormsModule],
  templateUrl: 'item.component.html'
})
export class FileUploadComponent {
  cities = new FormControl('');
  allCities = [
    'Delhi',
    'Mumbai',
    'New York',
    'Atlanta',
    'Varanasi'
  ];

  fruits = new FormControl('');
  allFruits = [
    'Banana',
    'Apple',
    'Mango',
    'Orange',
    'Grapes'
  ];
  constructor(private formBuilder: FormBuilder) {
  }
  fruitForm = this.formBuilder.group({
    selectedFruit: ''
  });
  get selectedFruit() {
    return this.fruitForm.get('selectedFruit');
  }
  get selectedFruitAsArray() {
    return this.fruitForm.get('selectedFruit')?.value?.toString().split(',');
  }
  onFormSubmit() {
    console.log(this.fruitForm.get('selectedFruit')?.value);
  }
} 
Find the print-screen of the output.
Angular Material Select : Custom trigger label

Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE












©2024 concretepage.com | Privacy Policy | Contact Us