Deselect all checkboxes except mandatory/disabled checkboxes Angular

Question

HTML:

                   <mat-selection-list #selectedColumns [(ngModel)] ="selectedOptions">
                   <div class= "content-section">
                   <mat-expansion-panel>
                   <mat-expansion-panel-header>
                   <mat-panel-title> Account<mat-panel-title>
                   <mat-expansion-panel-header>
                   <mat-list-option class= "download-columns" 
                   checkboxPosition="before"
                  *ngFor= "let column of singleNodeColumns" 
                   [selected]="column.template.Mandatory"
                   [disabled]="column.template.Mandatory" 
                   [value]="column.template">
                   <div class= "down load-columns-text">
                    <span> {{column.template.Name}}</span>
                  

TS:

      DeSelectionAll()
         { this.selectedColumns.selectedOption.clear(); }

This will deselect all checkboxes but it also deselects the column.template.Mandatory which I do not want. Please Help.

Answer 1

I don't see the component.ts file, so not sure what your selectedOptions and column.template.Mandatory look like. My best guess is, you have to run a filter, to remove all items, except the ones that match with mandatory items.

Something like:

DeSelectionAll() { 
    this.selectedColumns.selectedOption = 
        this.selectedColumns.selectedOption.filter(item => item === column.template.Mandatory); 
}

If column.template.Mandatory is an array, than you have looks for the match with the column.template.Mandatory array:

DeSelectionAll() { 
    this.selectedColumns.selectedOption = 
        this.selectedColumns.selectedOption.filter(item => column.template.Mandatory.findIndex(x => x === item) > -1); 
}

If selectedOptions and column.template.Mandatory have identifier fields like 'id', you can run above function with x.id === item.id