I have a number of link in an Angular project (using Angular 2), similar to:
<a [routerLink]="..."
[routerLinkActive]="..."
[routerLinkActiveOptions]="...">
Link
</a>
I would like to disable some of these depending on the context/state (by changing the color and preventing the action from happening).
For styling, I have added to the link:
[class.disabled]="!isValidLink()"
This lets me show the links as disabled, but I still need to prevent the routing. If I add a target="_self" to the element, it prevents routing, but I need to do this conditionally, depending on some state.
Is there any supported routing way of doing this, or some other implementation that would work?
Edit: Setting pointer-events to none in css would prevent clicking on the link, but am looking for a solution which would prevent keyboard events from triggering it too.
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>
Give it a try like this:
<a [routerLink]="..."
[class.disabled]="!isValidLink()"
(keydown.enter)="isValidLink()">Link</a>
Could you do two anchor tags?
<a *ngIf="onCase" [routerLink]="..."
[routerLinkActive]="..."
[routerLinkActiveOptions]="...">
Link
</a>
<a *ngIf="offcase" [class.disabled]="!isValidLink()">
Link
</a>