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?

you also need to include (keydown)... check my answer here... stackoverflow.com/questions/52364296/… — Sebastian Castaldi
– Sebastian Castaldi, Commented Nov 19, 2019 at 18:43

blueCloud · Accepted Answer · 2018-08-30 12:13:10Z

28

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>

edited Aug 30, 2018 at 12:13

answered Aug 30, 2018 at 2:29

blueCloud

4332 gold badges5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Drew Over a year ago

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.

Célia Over a year ago

This answer didn't work for me but was a good track. So what I needed to do in my case was : <mat-checkbox [checked]="element.active" (click)="$event.preventDefault();toggleActive(element)"></mat-checkbox>

Angel Balashev Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related