2

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>
user3812733
  • 165
  • 1
  • 9

1 Answers1

2

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!!

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • Thank you, I simplified your code to `(click)="$event.stopPropagation()"` and it works. I have found very similar question here http://stackoverflow.com/questions/35274028/stop-event-propagation-in-angular-2 – user3812733 Apr 27 '17 at 19:24