Prevent routerLink action in Angular 2

Question

I have a link:

<a routerLink="/test" (click)="testClick($event)">Test link </a>

I wanted to do in testClick function something like this:

testClick(event:any) {
    if (..some expression..) {
        //custom popup confirmation
        //if true --> event.preventDefault();
    } else {
        // go to link
    }
}

But calling preventDefault doesn't work. How can I fix it?

do you really need routerLink="/test" in your anchor () tag? if u can remove it from there and add the routing in your testClick() else statement, i hope then it will work. — Veena K. Suresh, Nov 02 '17 at 09:01
@VeenaK.Suresh unfortunately I do, because I need to have a possibility to open this link in new tab, but if a link doesn't have a routerLink attribute, a browser doesn't "parse" it as a link. — Buckethead, Nov 02 '17 at 10:44
@Timtest, I've written custom routerLink directive. For me it works. — Buckethead, Apr 20 '18 at 08:02
Possible duplicate of [Is it possible to stop router navigation based on some condition](https://stackoverflow.com/questions/42808818/is-it-possible-to-stop-router-navigation-based-on-some-condition) — Robin, Nov 20 '19 at 11:08

score 13 · Answer 1 · answered Jan 22 '18 at 14:15

13

You can wrap your link's text with span element and bind event handler on this span:

<a routerLink="/test"><span (click)="testClick($event)">Test link</span></a>

And your handler:

function testClick($event: MouseEvent) {
    if (expression) {
        $event.stopPropagation();
        // do something
        return;
    }
    // navigates to /test
}

answered Jan 22 '18 at 14:15

Vitalii Alekask

341
3
7

4

`$event.preventDefault()` should be shown in your handler too – Nothing Mi Apr 29 '18 at 05:31
`span` does not have any default handler of click event, so you have not to prevent it. – Vitalii Alekask May 02 '18 at 12:01
3

you are right, but in this case you have to prevent, or it will not work as expected @VitaliyAlekask – Nothing Mi May 02 '18 at 13:08
Working solution. In case you are using Material Buttons, take care of the click area. You have to remove the padding of the anchor element and set it to the inner span element + "display block" (for height) – Pierre Chavaroche Dec 17 '20 at 10:13
With that solution using the keyboard to trigger a link may still works – Mattew Eon Apr 18 '21 at 09:54

score 3 · Answer 2 · answered Nov 26 '19 at 16:55

There is an issue for this on github: https://github.com/angular/angular/issues/21457

In the meantime, you can help yourself with putting some more logic into the routerLink directive:

<a [routerLink]="someExpression ? [] : '/test'" (click)="testClick()">Test link</a>

This way you need to handle your expression twice: once in the link and once in the code; but on the other hand you don't have to care about the event at all, since it will propagate normally but the router will simply ignore it.

this is the only solution that actually worked, and i searched allot, thank you! — Shaybc, Dec 12 '21 at 01:41

Prevent routerLink action in Angular 2

2 Answers2

Linked