Angular 17 Material Multi Select Dropdown with Search

Angular 17 Material Multi Select Dropdown with Search

Creating an Angular Material multi-select dropdown with search is a frequently used UI component in web applications. It enables users to choose multiple items from a list of options while also providing a search feature to filter those options.

In this blog post, we will guide you through the process of implementing an Angular Material multi-select dropdown with search.

Step 1: Install the Angular Material package:

You need to install and configure Angular Material in your Angular 17 project. The process is easy and straightforward.

Step 2: Import the necessary modules into your Angular app:

import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

Step 3: Create a component for your multi select dropdown with search:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'my-multi-select-dropdown-with-search',
  templateUrl: './multi-select-dropdown-with-search.component.html',
  styleUrls: ['./multi-select-dropdown-with-search.component.css']
})
export class MultiSelectDropdownWithSearchComponent implements OnInit {

  myControl = new FormControl();

  options: Observable<string[]>;

  constructor() { }

  ngOnInit() {
    this.options = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => {
        const filterValue = value.toLowerCase();

        return this.allOptions.filter(option => option.toLowerCase().includes(filterValue));
      })
    );
  }

  allOptions = ['Apple', 'Banana', 'Orange', 'Pear', 'Grape'];

  selectedOptions: string[] = [];

  addOption(option: string) {
    this.selectedOptions.push(option);
    this.myControl.setValue(this.selectedOptions);
  }

  removeOption(option: string) {
    this.selectedOptions = this.selectedOptions.filter(item => item !== option);
    this.myControl.setValue(this.selectedOptions);
  }
}

Step 4: Create a template for your multi select dropdown with search:

<mat-form-field appearance="outline">
  <mat-label>Multi Select Dropdown with Search</mat-label>
  <mat-select multiple [formControl]="myControl">
    <mat-option *ngFor="let option of options | async" (click)="addOption(option)">

    </mat-option>
  </mat-select>
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of options | async" (click)="addOption(option)">

    </mat-option>
  </mat-autocomplete>
</mat-form-field>

<mat-chip-list>
  <mat-chip *ngFor="let option of selectedOptions" (remove)="removeOption(option)">

    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

Step 5: Add your component to your Angular app's template and start it up:

<my-multi-select-dropdown-with-search></my-multi-select-dropdown-with-search>

Step-by-step explanation:

In the initial step, we proceed by installing the Angular Material package. This comprehensive package encompasses all the essential components and styles necessary for constructing Angular Material-based applications.

Moving on to the second step, we proceed by importing the requisite modules into our Angular application. These modules are imperative for the utilization of select and input components.

The subsequent step involves crafting a dedicated component tailored for our multi-select dropdown with search. Within this component, we incorporate the logic for dynamically filtering available options and managing the selection and deselection of chosen items.

As the fourth step, we design a corresponding template for our multi-select dropdown with search. This template effectively renders the select input element along with a visually appealing chip list that showcases the selected options.

Lastly, we integrate our custom component into our Angular application's template, allowing it to seamlessly blend with the rest of the user interface, and subsequently, we initiate the application.

Conclusion

In this article, we've taken you through the process of creating an Angular Material multi-select dropdown with search functionality. While the example provided is a fundamental one, you have the flexibility to tailor it to your unique requirements and expand upon its capabilities as needed.