Angular material multiselect dropdown with select all option

user_11146595 0
Viewed 6066

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.

angular6 angular-material angular multi-select
2 Answers

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;
  }
}
user_121893550

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.

user_92262130
Related