Components: mat-select - need Check All & Uncheck All options (Select All & Deselect All) for multiple selection

[jayakrishna-v]

Bug, feature request, or proposal:

Request: Need options for Check All and Uncheck All for multiple selection.

What is the expected behavior?

We can have 2 options at the top of the options panel to Check all or Uncheck all options in a single click.
Something like this https://silviomoreto.github.io/bootstrap-select/examples/#selectdeselect-all-options

What is the current behavior?

Currently user has to click on each and every option in order to check or uncheck all the options available in the select control.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5

[weijyewang]

This use case is very common. I was quite surprise that angular material 2 does not support this....

Anyway hoping to see this feature soon :)

[atamansv]

I suppose that one checkbox "Select all" on the top would be more intuitive.
And if items selected partially, then checkbox will be in indeterminate state

[HashSix]

Here is a solution for multi select select all that I wrote, feel free to use it.
https://stackblitz.com/edit/angular-material-select-multi-c6vtux

[vesrah]

Another option is to put a mat-checkbox inside of your mat-select and use the indeterminate and checked properties. It might look something like this and live inside of your mat-select. There is some context missing, but it's the general idea.

<mat-checkbox class="mat-option"
                    (click)="$event.stopPropagation()"
                    (change)="selectAll(/* Check to see if you want to check/uncheck all, do that here */)"
                    [indeterminate]="itemsSelected.length && itemsNotSelected.length"
                    [checked]="!itemsNotSelected.length">
        Select All
      </mat-checkbox>

[paulogr]

Hi all!

I came out with a very simple solution, just add disabled property to your options to react when the all options were selected.

Unfortunally the mat-option component doesn't expose the selected property for input :(

<mat-form-field>
<mat-select name="stores" placeholder="Stores" [(ngModel)]="form.stores" multiple required>
  <mat-option #allS  [value]="-1">All</mat-option>
  <mat-option [disabled]="allS.selected" *ngFor="let s of stores | async" [value]="s.id">
    {{ s.name }}
  </mat-option>
</mat-select>
</mat-form-field>

Hope it helps

[kmkatsma]

I use reactive forms, and also needed to implement this. I ended up using modified version of what @HashSix put out there (thanks!)

If anyone comes along, here is my version using reactive form:
https://stackblitz.com/edit/angular-material-select-multi-c3agwh

In my project i just use checkbox outside of the select itself, and trigger select/deselect from that.

[RobertDiPaolo]

Would be great to have this as a standard part of angular material.

For now, inspired by the solutions from both @HashSix and @vesrah, I've created a simple reusable component that can be added before the the first : https://stackblitz.com/edit/angular-material-select-all

[nite]

Note this needs to work for groups - for now, I've personally just implemented this something like:

<mat-select placeholder="Stuff"
            [(value)]="selectedStuff"
            multiple>
    <mat-optgroup *ngFor="let group of this.optionGroups"
                    [label]="group.header">
        <mat-option class="select-all" disabled>
            <button mat-button
                    (click)="selectAll(group.children)">
                Select All
            </button>
            <button mat-button
                    (click)="selectAll(group.children, false)">
                Deselect All
            </button>
        </mat-option>
        <mat-option *ngFor="let item of group.children"
                    [value]="item">
            {{item}}
        </mat-option>
    </mat-optgroup>
</mat-select>

Noting in selectedStuff we need to filter out the empty select all options.
What would be nice is if someone could tell me how to style these as simple links & move them up beside the group header?

[adornala]

I did this:

    <span>
        <mat-form-field class="search-max-width" color="warn">
          <mat-select placeholder="Segments" [formControl]="segments" multiple
                      (selectionChange)="toggleSegments()">
            <mat-option (onSelectionChange)="toggleAllSegments($event)" value="all">All</mat-option>
            <mat-option *ngFor="let segment of allSegments" [value]="segment">
              {{segment}}
            </mat-option>
          </mat-select>
        </mat-form-field>
    </span>

in ts => segments = new FormControl([]); and set values conditionally.. But using angular 6 ;)

[gleycerparra]

placeholder="Years"
name="year"
class="filter-select"
[(ngModel)]="selectedYears"
multiple
#yearSelect="ngModel">
(click)="selectAll(yearSelect, years)" [value]="years[0]">
Seleccionar todos



{{year.viewValue}}

selectAll(select: NgModel, values) { if (Object.keys(this.selectedYears).length > 1) { this.checkAll = false; select.update.emit([]); } else { this.checkAll = true; select.update.emit(values); } }

This work for me with a checkbox. Is a extension of @HashSix answer.

[tinyweasel]

I would also like them to add this feature.

[kingrollo]

+1 from me!

[renaldas-kerpe-arria]

+1 Would love to see this as a configurable option.

[jsonod]

• 1 for mat-selection-list as well

[Abrissirba]

I would like this aswell. In the meantime I added a select-all component that can be used. It is similar to the one by @RobertDiPaolo but it doesn't take the mat-select options and value as inputs. https://stackblitz.com/edit/angular-material-abra-select-all

[danww]

@jsonod

• 1 for mat-selection-list as well

This is already/now a feature: https://material.angular.io/components/list/api#MatSelectionList
See selectAll() and deselectAll() methods.

What would be nice is if these two methods also triggered the selectionChange event.

[zijianhuang]

Indeed, to be consistent with mat-selection-list.

Currently I am doing:
this.usersSelect.options.forEach(k => k.select());

working fine, however, less use of ViewChild in the ts code will be better for application programming.

[AjitHKumarMarimuthu]

allS.selected

with disabled property we can't uncheck selected mat-option in mat-selected

[demiro]

that is weird that so much time after, such an important feature is not yet provided.