Как исправить проблему с мультиселектом в angular material?

Question

[kachurynets]

Я использую мультиселект библиотеки Angular Material. В этот селект я добавил элемент, при нажатии на который все элементы списка будут выбраны, но проблема в том, что в таком случае эти все элементы вместе с All попадают в поле селекта и выглядит это вот так "Value 1, Value 2, Value 3, Value 4, All" . Как мне сделать так, чтобы в этом поле при выборах всех элементов оставалось только значение "All" без остальных выбранных элементов?
https://stackblitz.com/edit/angular-material-with-...

Answer 1

[kachurynets]

<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>