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.


<mat-checkbox class="mat-option" [indeterminate]="isIndeterminate()"
[checked]="isChecked()" (click)="$event.stopPropagation()"

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.


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

  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) {
    } else {

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


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.


<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">

			<mat-option *ngFor="let project of projects" [value]="project">{{ }}</mat-option>


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

  selector: 'app-root',
  templateUrl: './app.component.html'
export class AppComponent {

  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)      


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 a certified Microsoft Certified Solutions Developer and has an MSc in Computer Science. He is currently working as a senior software developer for Royal London. He is the primary author and the founder of onthecode.

This Post Has 3 Comments

  1. Moaaz


    Thank you so much for your effort. I’ve implemented your code and made some tweaks. However, I’m facing some problems. It can be produced as, at least 8 tags should be there and when you press on an item in the dropdown, dropdown scrolls down one element. I’m wondering if this is because of the component tag. Could you please look into it, what could be the problem.


    1. Umut Esen
      Umut Esen

      Thanks for your comment! If you could put an example on github/stackblitz, I can take a look.

  2. Marcos Bertuol

    Thanks mate!! Saved me big time, I can now spend the rest of this sunny Sunday with my kids, and that’s the difference you just made 🙂

Leave a Reply