[Fixed] Conditionally disable router link in Angular


I have a number of link in an Angular project (using Angular 2), similar to:

<a [routerLink]="..."

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:


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.


Give it a try like this:

<a [routerLink]="..."

Leave a Reply

(*) Required, Your email will not be published