Angular 2 prevent router navigation on child component click

Question

I have a template

<div (click)="handler()">
  <input type='checkbox' (click)="$event.stopPropagation()" (change)="$event.stopPropagation()">
</div>

and in my component here is the handler

handler() {
  this.router.navigate('path');
}

I wanted do nothing on checkbox click but to route on div click.

The above solution is not working.

Could you please give me more details for example, do you want when checkbox to be clicked? what should happen when user click on text? should it redirect? — Naveen Motwani - AIS, Jul 30 '20 at 05:58
The checkbox is a child element of the div. Clicking div means clicking anything inside the div element including child elements. More info as to what you want to achieve is needed. — Spiderman, Jul 30 '20 at 06:00
But why would you need this? Could you please add more detail to your question? — Basheer Kharoti, Jul 30 '20 at 06:02
@BasheerKharoti I have a common item component which has a checkbox and a text element along side it. So I wrap each list components inside a div and I wanted to stop the child checkbox not to propagate on the parent div click — tsadkan yitbarek, Jul 30 '20 at 06:32
Actually your code is working. i just tested it. If you have label for the checkbox,clicking on checkbox navigate to the path. also navigate method required a array like this `this.router.navigate(['path])` — Hansaka Sandaruwan, Jul 30 '20 at 07:27

micronyks · Answer 1 · 2020-07-30T06:01:39.903

0

First argument of navigate function has to be an array

this.router.navigate(['path']);

OR

you can use navigateByUrl,

this.router.navigateByUrl('path');

Since you are using $event.stopPropagation() when you click on the checkbox, navigation won't happen but when you simply click on the div, you will be navigated to expected route.

edited Jul 30 '20 at 06:01

answered Jul 30 '20 at 05:59

micronyks

54,797
15
112
146

You haven't understoond the question. He meant to `stop propagation` when clicked on checkbox – Basheer Kharoti Jul 30 '20 at 06:01
I do understand it but he is not using `checked or unchecked` value anywhere. It will stop event bubbling which is fine but there is no use of checkbox technically as per his code. – micronyks Jul 30 '20 at 06:03
he might haven't showed the model binding though `(change)="$event.stopPropagation()"` is what he meant to stop bubbling – Basheer Kharoti Jul 30 '20 at 06:13

score 0 · Answer 2 · answered Jul 30 '20 at 06:35

This setup works for me:

<div (click)="onDivClick()">
  <mat-checkbox (click)="$event.stopPropagation()" (change)="onCheckboxChange($event)"></mat-checkbox>
</div>

...

onDivClick() {
  console.log('div clicked');
}

onCheckboxChange(event) {
  console.log(event);
}

Important to note:
MatCheckboxChange event type does not have a stopPropagation() function so your example code should actually display an error in the console.
So you want the stopPropagation() only on the checkbox click.

score 0 · Answer 3 · answered Jul 30 '20 at 09:35

0

I figured out I have a label that wraps the checkbox. So, I needed to add the click event to stop propagation at the label element

answered Jul 30 '20 at 09:35

tsadkan yitbarek

1,360
2
11
28

Angular 2 prevent router navigation on child component click

3 Answers3