I have a select function where all options are selected, but the selected sections are not shown. When I remove the all select function, everything works fine. Can you help me find the error?
Check out my work on Stackblitz
Here is 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">All</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([]);
}
}