Stopping Angular Click Events from Propagating

Image by Erik Stein from Pixabay

Scenario

We have the following template:

<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

Pass $event :

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

And stop the propagation:

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