Unable to prevent routerLink from navigating

I’m submitting a … (check one with “x”)

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Attempting to prevent navigation on a routerLink by calling preventDefault on event has no effect.

Expected/desired behavior Navigation should be canceled.

Reproduction of the problem If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

See http://plnkr.co/edit/58WrIkqXrevLbCtwgJCN?p=preview

What is the expected behavior? Clicking on “link is to one but want to go to two” should not navigate to component one as specified in routerLink, should navigate to component two instead since (click) is bound to a function that calls event.preventDefault and navigates to two.

What is the motivation / use case for changing the behavior? Want to be able to have “dynamic” default routes - .i.e not hard coded in router config (in real use case want to dynamically route to last child component used under this parent). Using routerLink instead of just code since also want user to be able to right click and choose “open in new window”

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] all but tested in Chrome
• Language: [all | TypeScript X.X | ES6/7 | ES5] Using typescript 1.8.10

[BBaysinger]

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.

[dotlouis]

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().