Conditionally disable router link in Angular

Discussão em 'Angular' iniciado por Yasir, Abril 14, 2025.

  1. Yasir

    Yasir Guest

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

Compartilhe esta Página