CODEWITHSUNDEEP
angularangular-material
Nihal Reddy
Nihal Reddy

Reputation: 123

Two way data binding for multiple mat-selection-list

I have list of groups coming from a service and creating multiple selection list for all the groups.

Each group has a list of templates, like an array inside a array.

my code

<mat-expansion-panel *ngFor="let group of groups">
  <mat-expansion-panel-header>
     <mat-panel-title>
       {{group.name}}
     </mat-panel-title>
  </mat-expansion-panel-header>
<mat-selection-list role="list" 
        [(ngModel)]="selectedTemplates" 
        [ngModelOptions]="{standalone: true}" 
        (selectionChange)="checkSelection($event)">
  <mat-list-option [value]="template" 
                   [checkboxPosition]="before" 
                  *ngFor="let template of group.templates">{{template.name}} 
  </mat-list-option>
</mat-selection-list>
</mat-expansion-panel>

TS

selectedTemplates: Array<TemplateType> =[];

this.serviceCall.subscribe( res => {
    this.selectedTemplates = res;
)

When i click on an item in the list they are displayed on a mat-table, and are being done so without any issues.

On the table there is a button on each row to remove my selection.

How do i uncheck the list item when the button is clicked

Thankyou

Upvotes: 0

Views: 2060

Answers (1)

Nihal Reddy
Nihal Reddy

Reputation: 123

I have figured it out, my data binding was wrong.

<mat-expansion-panel *ngFor="let group of groups; let i = index">
  <mat-expansion-panel-header>
     <mat-panel-title>
       {{group.name}}
     </mat-panel-title>
  </mat-expansion-panel-header>
<mat-selection-list role="list" 
        [(ngModel)]="selectedGroups[i].templates" 
        [ngModelOptions]="{standalone: true}" 
        (selectionChange)="checkSelection($event)">
  <mat-list-option [value]="template" 
                   [checkboxPosition]="before" 
                  *ngFor="let template of group.templates">{{template.name}} 
  </mat-list-option>
</mat-selection-list>
</mat-expansion-panel>

TS

selectedGroups: Array<GroupType> =[];

this.serviceCall.subscribe( res => {
    this.selectedGroups= res;
)

Upvotes: 3

Related Questions