I need to make router link on a div element but also inside it add another anchor or button that opens menu. Because of router link menu cannot be opened. Clicking on a button fires router link. How can I make it work?
<div [routerLink]="/foo">
<span>Title</span>
<button (click)="openMenu()">Open menu</button>
</div>
Actually I am using Angular Material and in fact the problem looks like this:
<md-card [routerLink]="/foo">
<span>Title</span>
<button md-icon-button [mdMenuTriggerFor]="menu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item (click)="rename()">
<md-icon>create</md-icon>
<span>Rename</span>
</button>
<button md-menu-item (click)="share()">
<md-icon>share</md-icon>
<span>Share</span>
</button>
</md-menu>
</md-card>
try below,
<button md-icon-button [mdMenuTriggerFor]="menu" (click)="open($event)" >
<md-icon>more_vert</md-icon>
</button>
in corresponding ts file,
open(e){
// this will stop event to propagate to work on link click.
e.stopPropagation();
}
Hope this helps!!