When selecting the options in mat-select there is no output

I have integrated a function in my select where all options are selected. The selection works, but the selected sections are not shown. Without the all select function my select works fine. Do you know where my error is?

My work in Stackblitz

My Code:

Select

<mat-select [(value)]="selectedValues" formControlName="dashboardValue" multiple>
   <mat-option class="dashboard-select-option" *ngFor="let dashboardPosition of displayDashboardValues" 
      [value]="dashboardPosition.key" (click)="togglePerOne(allSelected.viewValue)">
      {{ dashboardPosition.viewValue }}
   </mat-option>
   <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">Alle</mat-option>
</mat-select>

Output

<div class="col-md-12" *ngIf="selectedValue['valuePositionType'] === 'profit-loss-area'">
   <app-profit-loss-area></app-profit-loss-area>
</div>
<div class="col-md-12" *ngIf="selectedValue['valuePositionType'] === 'cash-area'">
   <app-cash-area></app-cash-area>
 </div>

TS

 public displayDashboardValues = [
    {key:'1', valuePositionType: 'profit-loss-area', viewValue:'Ergebnis'},
    {key:'2', valuePositionType: 'cash-area', viewValue:'Cash'},
  ]; 

// Dashboard form
    this.dashboardForm = this.formBuilder.group({
      dashboardValue: [null]
    });

// Select options
  togglePerOne(all){
    if (this.allSelected.selected) {
      this.allSelected.deselect();
      return false;
    }
    if(this.dashboardForm.controls.dashboardValue.value.length==this.displayDashboardValues.length)
      this.allSelected.select();
  }

  toggleAllSelection() {
    if (this.allSelected.selected) {
      this.dashboardForm.controls.dashboardValue
        .patchValue([...this.displayDashboardValues.map(item => item.key), 0]);
    } else {
      this.dashboardForm.controls.dashboardValue.patchValue([]);
    }
  }

Source: New feed
Source Url When selecting the options in mat-select there is no output