Myujth

I have a list of checkboxes:

 <section *ngFor="let item of list">
 <mat-checkbox [checked]="item.value" (click)="toggle(_checkbox_value_here_)">item.key</mat-checkbox>
 </section>

I need to pass the checkbox value (_checkbox_value_here_) to my function, how would you do that?

I can see this related question How to get checkbox data in angular material but really is there a way go achieve that without using ngModel and reactive forms?

The click event on the checkbox is just the native click event, which
doesn't know anything about the checkbox itself. Using the change
event or just getting a handle on the MatCheckbox instance directly
(e.g. with @ViewChildren) would be the recommended approach.

(c) https://github.com/angular/material2/issues/13156#issuecomment-427193381

<section *ngFor="let item of list">
 <mat-checkbox [checked]="item.value" (change)="toggle($event)">item.key</mat-checkbox>
</section>

you may use the element's checked property.

<mat-checkbox #c (click)="toggle(!c.checked)">Check me!</mat-checkbox>

• notice it's !c.checked, because by the time you click it, it's not checked yet.

Stackblitz Demo

Pass $event to the function

<section *ngFor="let item of list">
 <mat-checkbox [checked]="item.value" (click)="toggle($event)">item.key</mat-checkbox>
</section>

You can get value in function from event object..

toggle(event)
 console.log(event)

I think it will be event.value (not sure on this. You can see in console)

Use [checked] & [value] to bind the value, and pass the param in (change) event. I have created an example, check here https://stackblitz.com/edit/angular-anyw41?file=app/checkbox-configurable-example.html

Actually it is possible wihtout ngModel also :)

https://stackblitz.com/edit/angular-anyw41-zxrncz?file=app/checkbox-configurable-example.html