angular: Unable to prevent routerLink from navigating

I’m still seeing this as a problem. I’m using $event.stopPropogation(), $event.preventDefault(), and return false. I’m using Angular 5.2.1, the latest.

  onButtonClick(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    return false;
  }

    <li class="" routerLink="release" (click)="onButtonClick($event)" routerLinkActive="active">
      <b>1:</b><b>Information Release Form</b>
  </li>

It still routes when I click.

Got the same issue; Fixed it by putting both preventDefault() and stopPropagation() on the click handler of the child HTML node. I don’t understand why putting either one does not produce any result while putting both produces the intended behavior. Weirdly enough if you replace the <a> with a <div> you just need stopPropagation().

I’m struggling with this at the moment. I have a list of product items that is wrapped in a routerLink, but it also have child buttons that have other actions.

E.g.

<a [routerLink]="['/product', product.id]">
  ...
  <gallery>
    ...
    <button (click)="slideToNextImage($event)"></button>
  </gallery>
  ...
</a>

Where the expectation is that if you click any where on the item, it navigate to the product page, except if you click on the gallery button to see the next image of the product, then event.stopPropgation() should be called and stop the click event.

Me Too Facing Same Issue With Angular 5.x

<a  [routerLink]="['/users', user.id]">
{{user.name}} 
<button type="button" (click)="goToUpdateUserView($event, user);">edit</button>
<button type="button" (click)="deleteUser($event, user)">delete</button>
</a>

goToUpdateUserView(event, user) {
    event.stopPropagation(); 
    console.log('Hi , Prevented  Nav');
  }

Even though event.stopPropagation called when clicked on button the page routing to next view… Just Similar As @marcuslind90 's issue …

Route guard is the actual way to do this IMHO.

@shivarajnaidu I just ran into this as well, solved it with adding $event.preventDefault()

The router link directive has a click handler and you add your own click handler, so there are two click handlers in play. Since we do not impose any order on event handlers, it is not possible to use preventDefault to cancel the navigation in your handler.

We could provide a separate property (e.g., shouldNavigate) that the router link would use for this purpose. But I’m not sure how common this use case is, so I don’t know if it is worth it.

What you can do instead is to handle navigation imperatively without the router link directive. You can also implement your own directive similar to RouterLink (it is about 20 lines of code) that will support this use case.

Closing this issue.