components
components copied to clipboard
angular
mat-select - need Check All & Uncheck All options (Select All & Deselect All) for multiple selection
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
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 :)
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
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
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>
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
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.
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
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?
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 ;)
<mat-form-field class="select-form">
<mat-select
placeholder="Years"
name="year"
class="filter-select"
[(ngModel)]="selectedYears"
multiple
#yearSelect="ngModel">
<mat-option
(click)="selectAll(yearSelect, years)" [value]="years[0]">
Seleccionar todos
</mat-option>
<mat-option *ngFor="let year of years| slice:1; let i = index;" [value]="year">
<span *ngIf="year.id > 0">
{{year.viewValue}}
</span>
</mat-option>
</mat-select>
</mat-form-field>
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.
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
@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.
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.
allS.selected
with disabled property we can't uncheck selected mat-option in mat-selected
that is weird that so much time after, such an important feature is not yet provided.
4 Years now since the initial request :). Happy 2022 - still no updated yet?
Hoping this is somewhere in the works? Has anyone found an implementation outside of angular material for multi-select with select all (and also preferably a search filter)?
Angular material worst library in terms of functionality. You cant use this library in enterprise application.
The problem with all the workarounds presented so far is that none of them are accessible. I have the feature built out and working, however I realized the 'Select All' and 'Clear All' buttons can't be navigated to via keyboard and came here looking for solutions. The only way you can arrow-up or arrow-down between elements in a mat-select dropdown is if they are
