article: How to implement toggle all option in Angular Material Select | Angular Material Dev

[giscus[bot]]

article: How to implement toggle all option in Angular Material Select | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/articles/mat-select-all

[NorthwooDzp]

In current stackBlitz if I change options list in ngOnInit (like setTimeout(() => {this.toppings = [...], 2000} after Select All click I see that value of this option ('select-all') also has been added to select value. how I can prevent adding this value to select?

[shhdharmen]

can you create a stackblitz to showcase the issue?

[NorthwooDzp]

https://stackblitz.com/edit/angular-material-dev-mat-select-all-car7te
this solution is realy great for static options list, but it does not work for options that are loaded asynchronously

[shhdharmen]

I got the issue resolved. You need to listen to allValues changes.

https://stackblitz.com/edit/angular-material-dev-mat-select-all-txs2df?file=src%2Fapp%2Fshared%2Fdirectives%2Fselect-all.directive.ts

[NorthwooDzp]

I still see 'select-all' as a value when I checked it

[maozhenhua2]

When unselecting all, the selectionChange event will not be triggered

[shhdharmen]

You are right. We need to manually trigger the event. I created a sample here: https://stackblitz.com/edit/github-z3pfu5c1?file=src%2Fapp%2Fshared%2Fdirectives%2Fselect-all.directive.ts

[EliseoPlunker]

You can inprove the directive if you use

private allValues: any[] = [];

and in ngAfterViewInit

this.allValues = parentSelect.options.toArray().filter((x:any)=>!x._disabled && x.value!=this._matOption.value).map(x=>x.value);

In your subscription parentSelect.optionSelectionChanges you can add

        parentSelect._keyManager.setActiveItem(
          parentSelect._keyManager.activeItemIndex || 0
        );

to not "lose the focus"

Your forked stackblitz
NOTE: I love this article

[EliseoPlunker]

sorry, the link is https://stackblitz.com/edit/angular-material-dev-mat-select-all-fsvnyfbvv