Preventing routerLink Changing Routes with click Event Handler

Question

My angular application contains an anchor tag which has a routerLink and click handler associated with it:

<a [routerLink]="/abc" (click)="onClick"> </a>

I would like the routerLink to be used when the user right-clicks and selects "Open in New Tab".

The click handler should be triggered if the user simply left-clicks on the link. In this case I do NOT want the routerLink to trigger a route change.

Within my click handler I have tried aborting the click event, i.e.

public onClick(event: MouseEvent): {
    // Was hoping this would do it...
    event.preventDefault();
    // .. clutching at straws
    event.stopPropagation();
    // .. oh dear oh dear. Still not working
    event.stopImmediatePropagation();
}

None of these are preventing the routerLink from activating and navigating the the new route /abc. How can I have my click handler prevent the routerLink from being fired?

Have you tried to add `target="_blank"`? to make it always open in a new tab? See also http://stackoverflow.com/questions/36985112/angular2-what-is-the-correct-way-to-disable-an-anchor-element — Günter Zöchbauer, Aug 24 '16 at 17:44
@GünterZöchbauer That is not my desired behavior. I do *NOT* want to open the route if the user left-clicks on the link (in a new tab or otherwise). — jwa, Aug 24 '16 at 17:48
@GünterZöchbauer Only if the user picks "Open in New Tab" from the context menu (or similar, depending on browser) — jwa, Aug 24 '16 at 17:52
You might consider implementing your custom `RouterLink` directive derived from the integrated one. — Günter Zöchbauer, Aug 24 '16 at 17:53
I too appear to have this issue, yet it seems to work fine with material designs approach within the _haltDisabledEvents function, which from what I can tell is the exact same approach being used here. https://github.com/angular/components/blob/31b30fce08e79955d6650fc7581a0cf7a6b22113/src/material/button/button.ts#L175 — Munerz, Oct 04 '19 at 15:29
Any specific reason you must have both `[routerLink]` **and** `(click)`? Seems more flexible to inject the `Router` service into your component, then in your click handler use `router.navigate()` conditionally. — Shy Agam, Mar 19 '21 at 10:40
Have you tried using href instead of routerLink? The execution order might be different and make preventDefault() work — Vincent Gagnon, Jun 11 '21 at 11:50

score 0 · Answer 1 · answered Aug 16 '21 at 04:39

if you want to manually handle the navigation on <a> click then remove routerLink directive in your template.

<a href=# (click)="onClick"> </a>

notice above href=# is used because, it will simulate as if nothing changed in regards to link, i.e you will still see the pointer on hover like on normal <a> otherwise you can omit this and add your custom class.

instead in your onClick handle it appropriately.

constructor(private router:Router){}

public onClick(){

// Handle routing here or whatever behavior you want
this.router.navigate(['./abc']);

}

Preventing routerLink Changing Routes with click Event Handler

1 Answers1