How to stop event propagation on calling a function on change of mat-checkbox?

Question

<mat-checkbox (change)="handleProductClick(children, $event)"  [(ngModel)] = "children.selected"
[name]="children.grpId" [id]="children.id"></mat-checkbox>

handleProductClick(selectedProd : Product, event: any)
{
  event.stopPropagation();
}

If I use click function instead of change it works fine. Although I can't use click. I have to stick with change. Is there a way to call stopPropagation from change function? If not what else can I do to stop the event propagation?

Answer 1

I got it working. Had to use both click and change on the checkbox. I had tried that earlier. The only difference was I was calling a function in the click method and it never got called. If you call $event.stopPropagation on click method in the template, it works well. strange. The below answer solved my problem. Angular 2 prevent click on parent when clicked on child

<mat-checkbox (change)="handleProductClick(children, $event)"[checked]="children.selected" (click)="$event.stopPropagation()" [name]="children.grpId" [id]="children.id"></mat-checkbox>