Angular Stop Propagation of Different Event

Question

In my Angular 4 application, I have a parent component with a (dblclick) handler and a child component with a (click) handler.

component.html

<mat-list (dblclick)="goBack()">
    <button (click)="add($event)"> Add </button>
</mat-list>

component.ts

add(event){
    event.stopPropagation();
    doSomething();
}

However, from what I've seen, stopPropagation only stops events of the same type. In this example, if someone double clicks the button, it calls the goBack() function. If I change the parent component's event to a single (click) event, the propagation is stopped.

Is there anyway for me to block a (dblclick) in parent through the child's (click) event?

Thanks in advance.

How about using EventEmitter as @output from child which can be monitored in ngOnChanges(changes: SimpleChanges) function of parentComponent. You cant control parent dblclick event but you can certainly set a boolean which can allow execution of goBack() function. I hope it has helped — Shashank Vivek
That's a good idea. Unfortunately, I was imprecise with my question. The child is not an angular component, it's just an HTML button. If I was going to go this route, I would have to make it an actual component. — Steven K.

Kuba Kuba · Accepted Answer · 2018-04-13T06:22:18

You can try something like below. I think it's the simplest way.

event.target always refers to highest layer inside parent where event is assigned. Instead of nodeName, you can compare target by class, or id as well to be sure its a right button.

<mat-list (dblclick)="goBack($event)">
    <button (click)="add($event)"> Add </button>
</mat-list>

goBack(event){
    if(event.target.nodeName === "BUTTON"){
       return;
    }
    doSomething();
}

add(event){
    event.stopPropagation();
    doSomething();
}

Here you have working plnkr

Angular Stop Propagation of Different Event

1 Answers