How can I conditionally disable the routerLink attribute?

Question

In my Angular 2 application I'm trying to disable a routerLink without any success. I've tried to handle the click event on the click event (with event.preventDefault() and event.stopPropagation()) but it doesn't work.

How can I disable a routerLink?

This is such a massive waste of thousands and thousands of hours trying to find a solution that could be solved with about 5 lines of code in Angular :-( Could be as simple as `[routerLinkClickEnabled]="false"` and done! — Simon_Weaver, Nov 20 '19 at 06:58
@Simon_Weaver: Could you please provide a docu link for `[routerLinkClickEnabled]`? My searches are unsuccessful. — ruth, Feb 10 '20 at 12:24
@MichaelD this was a suggestion of what they *could* do to fix the problem and not something that actually exists. sorry I wasn't clearer! Hopefully now Angular 9 is out they'll be able to loop back on certain common issues like this one. — Simon_Weaver, Feb 10 '20 at 19:27
@Simon_Weaver: I overlooked the '_could be_' phrase in your original comment. All clear now. Thanks. — ruth, Feb 11 '20 at 10:09

score 126 · Accepted Answer · edited Mar 21 '20 at 12:17

126

Disable pointer-events on the element via CSS:

<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>

a.disabled {
   pointer-events: none;
   cursor: default;
}

See also Angular2, what is the correct way to disable an anchor element?

or

<a *ngIf="isEnabled" [routerlink]="xxx">Link</a>
<div *ngIf="!isEnabled">not a link</div>

or to easily reuse the disabled link template

<ng-template #disabledLink>
  <div *ngIf="!isEnabled">not a link</div>
</ng-template>
<a *ngIf="isEnabled; else disabledLink" [routerLink]="xxx">Link</a>

edited Mar 21 '20 at 12:17

Bellash

7,560
6
53
86

answered Feb 16 '16 at 11:30

Günter Zöchbauer

623,577
216
2,003
1,567

2

Thank you, it works. I'm using bootstrap to add style to the navbar. Your solution removes the `not-allowed` cursor style when the link is disabled. I had to add it separately. – TizianoL Feb 16 '16 at 13:43
1

The `cursor` line can be omitted entirely, it's just the visual cue that the link is disabled. I bootstrap sets that already, use this setting instead. – Günter Zöchbauer Feb 16 '16 at 14:18
Doesn't work for internet explorer and Edge - it's still clickable – user3292624 Nov 30 '17 at 14:40
You can use `*ngIf` to show alternative content instead of trying to make the ` – Günter Zöchbauer Nov 30 '17 at 14:43
2

@user3292624 still, is IE considered a browser? – Vignesh Jan 19 '18 at 13:55
In a wider sense of the word, I guess so :D – Günter Zöchbauer Jan 19 '18 at 13:58
1

Also useful if you want to disable the current active route: use routerLinkActive. Add pointer-events: none of the active class. – Hayden Braxton Feb 24 '20 at 21:19
Do not work. If router link is empty: it redirects to default route. (angular 8) – Damien C Apr 23 '20 at 08:59
@DamienC This answer does not say that an empty routerLink would solve the issue. Perhaps I didn't understand your comment. – Günter Zöchbauer Apr 23 '20 at 09:29
1

Thanks @GünterZöchbauer . to manage conditional link, finally, I manage to do it only in controller. Unable to do it directly in template. But in a architecture point of view, it's a better way to code it – Damien C Apr 24 '20 at 15:18
If you use the second example and are using routerLinkActive on an ancestor element, you will find that the *ngIf will block the [routerLink] from being seen and thus routerLinkActive will fail to work as intended. To work around this, just add an empty anchor element. ```
Link Link

Kerry Johnson

May 08 '20 at 01:06

Martin Schneider · Answer 2 · 2021-11-15T13:40:36.787

Angular 13 and above

[routerLink]="null" (and undefined) is now officially used to disable the routerLink.
(see Docs)

So this is enough:

<a [routerLink]="linkEnabled ? 'path' : null">Link</a>

Angular 12 and below

[routerLink]="null" (and undefined) is treated as a shorthand for an empty array of commands. So it makes the routerLink to link to the current/active route. This behavior allows us to abuse the routerLinkActive directive for our purpose:

Template:

<a [routerLink]="linkEnabled ? 'path' : null"
   [routerLinkActive]="linkEnabled ? 'is_active' : 'is_disabled'">Link</a>

Optional CSS:

.is_disabled {
    cursor: default;
    text-decoration: none;
}

.is_active {
    // your style for active router link
}

Live demo (Angular 10):
See demo on StackBlitz

Detailed Description:

When linkEnabled returns false, null will make routerLink to link to the current/active route.

If routerLink links to the active route, the class which is specified in routerLinkActive will be applied. That will be is_disabled in this case.

There we can specify, how the disabled routerLink should appear.

routerLink to the active route won't trigger a navigation event.

Regarding the Angular 13 change, I'm very disappointed that it doesn't let you use an `href` when the `routerLink` is null. I have a case where I use the same component both in the main app and as a web component (Angular Elements) on other sites, so sometimes it should use routing and sometimes it should be a true URL. But if there is a `routerLink` at all, `href` just doesn't work. E.g. `Account`. I know I can use two separate links but that's going to be duplicate maintenance. — Roobot, Mar 29 '22 at 15:54

score 7 · Answer 3 · answered Feb 26 '21 at 04:12

All the top answer are workaround.

The best way is something you can find in this solution https://stackoverflow.com/a/45323200/3241192 by @taras-d

Another way to disable routerLink - replace onClick method.

To do this you have to create directive:

import { Directive, Input, Optional } from '@angular/core';
import { RouterLink, RouterLinkWithHref } from '@angular/router';

@Directive({
    selector: '[routerLink][disableLink]'
})
export class DisableLinkDirective {

    @Input() disableLink: boolean;

    constructor(
        // Inject routerLink
        @Optional() routerLink: RouterLink,
        @Optional() routerLinkWithHref: RouterLinkWithHref
    ) {

        const link =  routerLink || routerLinkWithHref;

        // Save original method
        const onClick = link.onClick;

        // Replace method
        link.onClick = (...args) => {
            if (this.disableLink) {
                return routerLinkWithHref? false: true;
            } else {
                return onClick.apply(link, args);
            }
        };
    }

}

Usage:

<a routerLink="/search" [disableLink]="!isLogged">Search</a>

score 5 · Answer 4 · answered Sep 10 '18 at 05:32

I've just had some success with a similar issue: having an array of nav links in an ngFor, some required [routerLink], while others required (click) - my issue was that all links relied on [routerLink] for [routerLinkActive], so I had to stop routerLink, without touching it's value.

`<a [routerLink]="item.link" routerLinkActive="isActive">
    <span (click)="item.click ? item.click($event) : void>
</a>`

with:

`click: ($event) => {
    $event.stopPropagation(); // Only seems to
    $event.preventDefault(); // work with both
    // Custom onClick logic
}`

As the span is inside, you can be sure the cancelling of the event happens before it bubbles up to [routerLink], while routerLinkActive will still apply.

You'd better add the click to the anchor. What if the user clicks inside the anchor but outise the span? (E.g. the anchor has padding.) — ANeves, Apr 02 '19 at 14:23

score 4 · Answer 5 · answered May 22 '19 at 01:52

Disabling pointer-events on any html tag:

<div [routerLink]="['/home', { foo: bar }]"
     [ngStyle]="{'pointer-events': myLinkEnabled ? 'none' : null}">
     Click me
</div>

'none' resolves to disabling pointer-events, that is, disabling the link.

null resolves to ignore the style.

score 4 · Answer 6 · answered Oct 20 '19 at 09:17

4

Unfortunately, Angular doesn't seem to have a null value support for the routerLink.

However, this works for me. An example of my menu implementation:

<div *ngFor="let category of categories" [routerLink]="category.subcategories ? [] : [category.link]" (click)="toggleSubcategories(category)">

Simply put, if a category has any subcategories, don't redirect, but open the subcategories.

answered Oct 20 '19 at 09:17

Tomas Lukac

1,923
2
19
37

This is the correct answer. Empty array doesn't give any console errors e.g. [routerLink]="exists ? ['/go']: []" – RicardoVallejo Jan 15 '23 at 21:17

score 1 · Answer 7 · edited Jun 08 '20 at 07:54

1

Try this:

<div *ngFor="let childitem of menuitem.MenuRoutes">
<a [routerLink]="menuitem.IsMain ? [childitem.Route] : []"><a>
</>

edited Jun 08 '20 at 07:54

סטנלי גרונן

2,917
23
46
68

answered Jun 08 '20 at 06:53

Erick

11
1

score 0 · Answer 8 · answered Apr 06 '21 at 07:43

My case was to use routerLink, sometimes use click to open modal, and internal logic of route URL if we don't provide routerLink URL. So for click, I had to delete routerLink.

[routerLink]="disableRouterLink ? null : (btnRouterLink || pathCondition)"

in my case, null deletes routerLink attribute, and I can use (click) event properly.

P.S. empty array [] provided in answers abowe doesn't remove attribute routerlink from the element.

How can I conditionally disable the routerLink attribute?

8 Answers8

Angular 13 and above

Angular 12 and below

Linked