CODEWITHSUNDEEP
angulartypescriptcheckboxangular6
t9217
t9217

Reputation: 117

How to get all checked cheboxes from dynamic list

I have a dynamic list of checkboxes and I want to send only the checked to my request... But I don't know how to do that...

Here is my list of checkboxes: 

<div *ngFor="let p of places;  let i=index">
   <mat-checkbox class="example-margin secondary-text" [checked]="checkValue(p, i)" id="{{p}}">
      places
   </mat-checkbox>
</div>

Here is the checkvalue method. The placesList is the default and I use to check the checkboxes by default. 

checkValue(item: any, index: any) {
   return this.placesList.some(e => e === item);
}

Upvotes: 1

Views: 34

Answers (1)

Andre F
Andre F

Reputation: 534

<div *ngFor="let p of places; let i = index;">
   <mat-checkbox [checked]="item.checked" (change)="onChange($event, i, item)">
      {{item.label}}
   </mat-checkbox>
</div>

And in your component add the onChange function:

onChange(event, index, item) {
   item.checked = !item.checked;
}

Working StackBlitz

Upvotes: 1

Related Questions