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?
routerLinkActive is simply an indicator of whether this link represents the active route. @jessepinho - Tried it - [routerLinkActive]="'active'" will only work if you also have [routerLink] in the a-tag. If you had (click)="navitageTo('/route')" instead of [routerLink], and in that function, you called this.
What is the difference between [routerLink] and routerLink ? How should you use each one? They're the same directive. You use the first one to pass a dynamic value, and the second one to pass a static path as a string.
Yes it can be attached to div tag, your route is probably wrong try add / in front of route.
The RouterLinkActive is a directive for adding or removing classes from an HTML element that is bound to a RouterLink . Using this directive, we can toggle CSS classes for active Router Links based on the current RouterState .
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>
[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>
[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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With