Select all and Deselect all in Angular with mat-select

Surabhi Shivmath

7/27/20262 min read

worm's-eye view photography of concrete building

Phew, this one was a tough nut to crack. This was for an existing project and I had to use mat -select since that was the design language being used for the project. I swam through the entire internet only to find myself in the middle of the ocean called nowhere. Finally, I came up with my own way of doing it using mat-select and angular.

Let’s say I am buying fruits from fruits available on the website.

1. This is the list of options I want in my drop-down checkboxes. This variable is declared in my buyFruits.component.ts file.

export class BuyFruitsComponent implements OnInit {

fruits: Array<any> = null;

// Declare your select option variable

ngOnInit() {

this.fruits = ["Mangoes","Grapes","Kiwi","Banana"];

// Initialise it here

}

2. Further

<mat-select [formControl]="fruitClass" placeholder="Select one or more" [(value)]="filterModel.selectedFruits"

(selectionChange)="handleFilterDataChange($event)" multiple>

3. Next, create your <mat-select> from where you want to select your options. This is written in my reports.component.html. Ignore the classes I have used.

import { Component, OnInit } from '@angular/core';

import { FormControl, Validators } from '@angular/forms';

// import FormControl and Validators

export class BuyFruitsComponent implements OnInit {

fruits: Array<any> = null;

// Declare your select option variable

filterModel: any = {

selectedFruits: <Array<any>>[],

}; // This variable is used to store the fruits selected

fruitClass = new FormControl([], Validators.required);

/* dateClass is used to track the status of the select form. By declaring FormControl you can retrieve, edit the data in the select form from this file. */

count:number = 0; // Declaring a count variable

ngOnInit() {

this.fruits = ["Mangoes","Grapes","Kiwi","Banana"];

// Initialise it here

}

handleFilterDataChange() {

/* Function to handle and store data from the select form. This is where all the magic happens */

let {selectedFruits} = this.filterModel;

if (selectedFruits.indexOf("Select all") > -1 ){

this.count++;

// Setting count to 1, if select all is selected

}

if (this.count > 0 && selectedFruits.indexOf("Select all") > -1) {

/* If select all is true and count is 1, then check all the checkboxes */

this.fruitClass.setValue((this.fruits).concat("Select all"));

// I am selecting all the fruit options and "Select all" option

} else if (this.count > 0 && selectedFruits.indexOf("Select all") <= -1) {

/* This is to tackle when "Select all" has been unchecked after being checked. You want to reset the form, but not for forever. */

this.fruitClass.reset();

this.count--;

}}

The important thing to notice is this -

<mat-form-field class="mad-input h6" [floatLabel]='never'>

<mat-select [formControl]="fruitClass" placeholder="Select one or more" [(value)]="filterModel.selectedFruits"

(selectionChange)="handleFilterDataChange($event)" multiple>

<mat-option [value] = "selected" >SELECT ALL</mat-option>

<mat-option *ngFor="let type of fruits" [value]="type">

{{type|uppercase}}</mat-option>

</mat-select>

</mat-form-field>

</div>

Here,

[formControl]=”fruitClass” is using the formControl we created in the ts file. Remember that name?
Here [(value)] called filterModel.selectedFruits will collect/record the options you have selected. You have already declared this variable in ts file
(selectionChange)=”handleFilterDataChange($event)” , where handleFilterDataChange is the function that is watching any changes/events that take place on the form

You can further improvise on this, for example, checking “Select all” automatically when all fruits are manually checked or even unchecking the “Select all” option when one of the fruits has been unchecked. I just gave this example to help you understand how to interact with forms in HTML file from ts file.

Happy coding!

Still here? You probably have a project.

Bring me a problem