CODEWITHSUNDEEP
javascripthtmlangulardom
Vitalii Oliinyk
Vitalii Oliinyk

Reputation: 31

How to make a button inside a clickable element?

Let's say i have a button inside clickable container

<div class="container" (click)="onContainerClick()">
  <button (click)="onButtonClick()">Button</button>
</div>

When i'm clicking on the button both onContainerClick and onButtonClick are triggered. Is there any way to trigger only button's click event inside the container.

Example: https://stackblitz.com/edit/angular-mekd2t

Upvotes: 3

Views: 1081

Answers (2)

Aaron Gibson
Aaron Gibson

Reputation: 1378

<button (click)="$event.stopPropagation();onButtonClick()">Button</button>

You need to stop the propagation of the event. This should cover it

Upvotes: 4

Quentin
Quentin

Reputation: 943214

Capture the event object in your event handler and call the stopPropagation method.

That will stop it bubbling up to the parent element.

<button (click)="onButtonClick(); $event.stopPropagation()">Button</button>

Upvotes: 4

Related Questions