[SOLVED] Conditionally disable router link in Angular

Conditionally disable router link in Angular

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.

Solution

Give it a try like this:

<a [routerLink]="..."
    [class.disabled]="!isValidLink()" 
    (keydown.enter)="isValidLink()">Link</a>