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

Question

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([]);
    }
  }

Answer 1

If you use dashboardPosition.key as value , your ngIf check selectedValue['valuePositionType'] === 'profit-loss-area' can not work any longer, because you have only the selected keys in your selectedValues list. Just try to add {{selectedValues}} to see whats happen. Another issue is your [value]="0" which seems to be a c&p fragment.

As one possible solution i would suggest following changes:

First of all here is a working Stackblitz .

Component

• add a dummy entry to your displayDashboardValues for select all
• use a plain boolean for allSelected
• just set the selectedValues in your toggleAllSelection

export class AppComponent implements OnInit  {

  dashboardForm: FormGroup;
  selectedValues: any;
  allSelected = false;

   public displayDashboardValues = [
    {key:'0', valuePositionType: 'undefined', viewValue:'Alle'},
    {key:'1', valuePositionType: 'profit-loss-area', viewValue:'Ergebnis'},
    {key:'2', valuePositionType: 'cash-area', viewValue:'Cash'},
    {key:'3', valuePositionType: 'balance-area', viewValue:'Bilanz'},
    {key:'4', valuePositionType: 'staff-area' ,viewValue:'Mitarbeiter'},
    {key:'5', valuePositionType: 'divisions-area', viewValue:'Sparten'},
    {key:'6', valuePositionType: 'commisions-area', viewValue:'Aufträge'},    
  ];

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

  toggleAllSelection() {
      this.allSelected = !this.allSelected;  // to control select-unselect
      this.selectedValues = this.allSelected ? this.displayDashboardValues : [];
    }
}

Template

• as mat-option only show values with key > 0 as default
• add another mat-option with your custom value (as you did before) and link it your toggleAllSelection

<mat-select  [(value)]="selectedValues" (selectionChange)="selectionChange($event)" formControlName="dashboardValue" multiple>
          <div *ngFor="let dashboardPosition of displayDashboardValues">
            <mat-option class="dashboard-select-option" *ngIf="dashboardPosition.key>0" [value]="dashboardPosition">
              {{ dashboardPosition.viewValue }}
            </mat-option>
          </div>
          <mat-option [value]="displayDashboardValues[0]" (click)="toggleAllSelection()">{{ displayDashboardValues[0].viewValue }}</mat-option>
        </mat-select>