How to fix multiselect issue in angular material?

Question

Angular

I am using Angular Material library multiselect. I added an element to this select, when clicking on which all the elements of the list will be selected, but the problem is that in this case, all these elements, together with All, fall into the select field and it looks like this "Value 1, Value 2, Value 3 , Value 4, All" . How can I make it so that when all items are selected, only the "All" value remains in this field, without the rest of the selected items?
https://stackblitz.com/edit/angular-material-with-...

Answer 1

<form [formGroup]="searchUserForm" fxFlex fxLayout="column" autocomplete="off" style="margin: 30px">
    <mat-select placeholder="User Type" formControlName="userType" multiple>
      <mat-select-trigger *ngIf="allSelected.selected">
       <span>
         ALL
       </span>
      </mat-select-trigger>
        <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key">
            {{filters.value}}
        </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    </mat-select>
</form>