Stopping Angular Click Events from Propagating

Image by Erik Stein from Pixabay

Scenario

<a (click)="onCardClick()">
<app-card></app-card>
</a>

When any area of the app-custom-start-card is clicked the onCardClick() event listener will fire.

We have a button inside the card:

<button (click)="issuesTab()">Issues</button>

Clicking this button also triggers onCardClick() . We want to prevent this.

Approach

<button (click)="issuesTab($event)">

And stop the propagation:

issuesTab(e:Event) {
e.stopPropagation()
window.open(ISSUES_URL, '_blank');
}

Founder of Firefly Semantics Corporation