Angular material multiselect dropdown with select all option

2
votes

I am using angular material multiselect with select all option.
Refer the stackblitz link below.
https://stackblitz.com/edit/angular-material-with-angular-v5-znfehg?file=app/app.component.html
Currently whichever options I select appear in the textbox of multiselect which is desired behaviour.
I want to display only "All" text when I select all options, instead of showing each and every item In the list.
I tried several ways with template reference variable but it is not working. Kindly help on this.

2
angularangular-materialangular6multi-select
This is the exact same question with the answer stackoverflow.com/questions/51580095/… – gourav
Not quite the same question - this user wants to know how to display "All" instead of the list of selected items. – G. Tranter

2 Answers

1
votes

The mat-select-trigger is specifically provided for customizing the display of selections. In your case, there is some work that you need to do to filter out '0' from the actual selections, and to unselect 'All' when an item is unselected, but generally you can do something like the following to change the display to All when you select the 'All' checkbox:

<mat-select ...>
  <mat-select-trigger>
    {{searchUserForm.controls.userType.value.length >= 4 ? 'All' : searchUserForm.controls.userType.value}}
  </mat-select-trigger>
  ...
</mat-select>

The actual condition check will depend on how you implement selection of all items in your model.

0
votes

You could use onSelectionChange event on mat-option element to check if all options are checked, and then nest your 'all' checkbox into an ngIf

in app.component.html:

<mat-select placeholder="User Type" formControlName="userType" multiple>
  <mat-option *ngFor="let filters of userTypeFilters" (onSelectionChange)="change($event)" [value]="filters.key">
    {{filters.value}}
  </mat-option>
  <div *ngIf="allChecked">
    <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
  </div>
</mat-select>

add the following in app.component.ts:

change(event) {
  if(event.isUserInput) {
    console.log(event.source.value, event.source.selected);
    // Todo: check if all field are checked
    this.allChecked = true;
  }
}