If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below:
import {Directive, HostListener} from “@angular/core”;
@Directive({
selector: “[click-stop-propagation]”
})
export class ClickStopPropagation
{
@HostListener(“click”, [“$event”])
public onClick(event: any): void
{
event.stopPropagation();
}
}
Then just add it to the element you want it on:
<div click-stop-propagation>Stop Propagation</div>
Source: angular – Stop mouse event propagation – Stack Overflow