Angular - how handle click event inside other clickable container

user_5442743 0
Viewed 3422

I have a clickable div which on click navigates to other page. Inside this div I'd like to have a like-component. If user clicks the like then onLikeClicked() should be executed but onContainerClick() should be blocked. Clicking somewhere else inside container should execute onContainerClick(). How can I block onContainerClick() event if user clicks directly on like component?

<div class="container" (click)="onContainerClick()">
    <like (click)="onLikeClicked()">
        
    </like>
</div>
angular onclick events
3 Answers
user_101782610

You could call the stopPropagation() function in the like element's click event to stop the event bubbling.

Try the following

Controller

export class AppComponent  {
  onContainerClick(event) {
    event.stopPropagation();           // <-- also if you want to stop container click event bubbling
    console.log("container clicked");
  }

  onLikeClicked(event) {
    event.stopPropagation();
    console.log('like clicked');
  }
}

Template

<div (click)="onContainerClick($event)" class="container">
  <p (click)="onLikeClicked($event)" class="content">Something inside</p>
</div>

Working example: Stackblitz

user_65139210

You have to stop the event propagation. This not angular specific, just basic javascript. As the official documentation for stopImmediatePropagation() states:

Invoking this method prevents event from reaching any registered event listeners after the current one finishes running and, when dispatched in a tree, also prevents event from reaching any other objects.

component.html

<div class="container" (click)="onContainerClick()">
    <like (click)="onLikeClicked($event)">
        
    </like>
</div>

component.ts

export class Component {

  onContainerClick(): void {
    // do something
  }

  onLikeClicked(event: MouseEvent): void {
    event.stopImmediatePropagation();
    // do something
  }
}
user_73261920
Related