Implement Select All Option for MatSelect in Angular Material
Angular Material Select All Options Mat Select

Implement Select All Option for MatSelect in Angular Material

Quickly Select All Items in MatSelectModule

Angular Material select component has a multi-select feature, which allows users to check multiple options. However, there is no way to provide an option to select all options with a mat-select component out-of-the-box.

In this post, we will create a custom option component for selecting all items in mat-select. The custom component will appear as part of the options and allow the user to set selected value of all options. It will also support indeterminate mode of checkbox, meaning it will show a different icon if some options are ticked.

Run the live demo below to see how to select all options in Angular Material select component:

Steps to Implement Select All

Here are the steps to create a custom option component for selecting all options:

  1. Import Angular Material as a feature module and include MatSelectModule and MatCheckboxModule.
  2. Create a custom component for displaying “Select All” option.
  3. Use model binding to access mat-select model and select all items

Create a Custom Select Option Component

Use Angular cli to generate a component:

ng generate component select-check-all

In the generated component, add a mat-checkbox.

Set the class to mat-option so that its styling is consistent with other options in mat-select.

Handle select change event, which will be used for setting the values on the select.

select-check-all.component.html:

<mat-checkbox class="mat-option" [indeterminate]="isIndeterminate()"
[checked]="isChecked()" (click)="$event.stopPropagation()"
    (change)="toggleSelection($event)">
    {{text}}
</mat-checkbox>

Inside the backing typescript file, declare input variables to access the model of FormControl, values of mat-select and optionally a text value for our custom component.

select-check-all.component.ts:

import { Component, Input, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material';

@Component({
  selector: 'app-select-check-all',
  templateUrl: "./select-check-all.component.html",
  styleUrls: ['./select-check-all.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class SelectCheckAllComponent {
  @Input() model: FormControl;
  @Input() values = [];
  @Input() text = 'Select All'; 

  isChecked(): boolean {
    return this.model.value &amp;&amp; this.values.length
      &amp;&amp; this.model.value.length === this.values.length;
  }

  isIndeterminate(): boolean {
    return this.model.value &amp;&amp; this.values.length &amp;&amp; this.model.value.length
      &amp;&amp; this.model.value.length < this.values.length;
  }

  toggleSelection(change: MatCheckboxChange): void {
    if (change.checked) {
      this.model.setValue(this.values);
    } else {
      this.model.setValue([]);
    }
  }
}

Add some styles so that the checkbox takes up full width.

select-check-all.component.css:

app-select-check-all .mat-checkbox-layout,
app-select-check-all .mat-checkbox-label {
  width:100% !important;
}

Embed Select All Component in Material Select

We can now use the custom component to select all options in a mat-select.

Create a form and add a mat-select with multiple selection.

Above the loop for generating options, add the app-select-check-all component. This way, our custom component will appear as the first item in the list.

Don’t forget to pass in the form control value and the full list of values into app-select-check-all component.

app.component.html:

<form [formGroup]="form">
	<mat-form-field class="full-width">
		<mat-select placeholder="Projects" formControlName="project" multiple>

			<app-select-check-all [model]="form.get('project')" [values]="projects">
			</app-select-check-all>

			<mat-option *ngFor="let project of projects" [value]="project">{{ project.name }}</mat-option>
		</mat-select>
	</mat-form-field>
</form>

app.component.ts:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
import { Project } from "./project";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  projects:Project[];
  form: FormGroup;

  constructor() { 
    // Create sample projects
    this.projects = [
      new Project("Project 1"),
      new Project("Project 2")
    ]

    // Setup form
    this.form = new FormGroup({
      project: new FormControl(this.projects)      
    });
  }
}

Summary

In this post, you learned how to select all options in Angular Material Select with a custom checkbox component. This custom behaviour provides a way for user to quickly select all options.

Umut Esen

Umut is an enthusiastic software developer, latest web and mobile technology adapter and primary author of onthecode.

Leave a Reply

Close Menu