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. Continue reading...