Как добавить триггер Select All в mat-select с помощью Angular8 / Material

Question

Я создал этот код:

      <mat-form-field appearance="outline">
        <mat-label>Handler Type</mat-label>
        <mat-select multiple [(value)]="handlerType">
          <mat-option *ngFor="let handlerType of handlerTypeSelect" [value]="handlerType">
            {{ handlerType.name }}
          </mat-option>
          <div class="etc-select-action-button">
            <button mat-button color="accent" (click)="selectAll()">
              <mat-icon>check_box_outline</mat-icon> <span>Select All</span>
            </button>
            <button mat-button color="accent" (click)="handlerType=undefined; $event.stopPropagation()">
              <mat-icon>check_box_outline_blank</mat-icon> <span>Clear All</span>
            </button>
          </div>
        </mat-select>
      </mat-form-field>

Я хотел бы иметь две кнопки, которые выбирают все и очищают все выбранные параметры. Кнопка «Очистить все» работает нормально, а «Выбрать все» - нет. Пожалуйста помоги. Спасибо.

Answer 1

Вы можете присвоить все значения свойству handletType при нажатии на метод selectAll.

Попробуйте это:

selectAll(){
      this.handlerType = this.handlerTypeSelect;
  }

Answer 2

 selectAll(select: NgModel, values, array) {
    select.update.emit(values); 
  }

  deselectAll(select: NgModel) {
    select.update.emit([]); 
  }

попробуйте это

или еще

попробуйте это

<mat-checkbox class="mat-option"
                    (click)="$event.stopPropagation()"
                    (change)="selectAll(/* Check to see if you want to check/uncheck all, do that here */)"
                    [indeterminate]="itemsSelected.length && itemsNotSelected.length"
                    [checked]="!itemsNotSelected.length">
        Select All
      </mat-checkbox>