10
<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?

blueCloud
  • 393
  • 1
  • 4
  • 11
  • you also need to include (keydown)... check my answer here... https://stackoverflow.com/questions/52364296/matcheckbox-preventdefault-and-event-checked-value/58940850#58940850 – Sebastian Castaldi Nov 19 '19 at 18:43

1 Answers1

26

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>

blueCloud
  • 393
  • 1
  • 4
  • 11
  • This took way too long to figure out. Is the (click) property available on all DOM elements by default? Angular Language Service didn't help me find this and Angular Material's documentation didn't have (click) in the API either... I'm not sure why I didn't just try it, but your suggestion saved me from going bonkers. – Drew Jan 25 '19 at 04:08
  • 3
    This answer didn't work for me but was a good track. So what I needed to do in my case was : `` – Célia Sep 03 '20 at 10:10
  • No answer seems to work with Angular 15 (neither the accepted one, neither @Célia comment. At the end I figured, that if one has to stop the checkbox from being checked on click, then maybe it isn't the right html element to use for the case. – Angel Balashev Mar 14 '23 at 10:26