How to disable the Link in Angular

In this tutorial, we are going to learn about how to disable the link in Angular with the help of examples.

Consider, that we have the following Link in our Angular app:

<a routerLink="/users">Users</a>

Disabling the Link in Angular

To disable a link in angular, add the pointerEvents: "none" to the anchor tag <a> style property.

Here is an example:

<a routerLink="/users" [ngStyle]="{pointerEvents: 'none'}">Users</a>

When we set a pointerEvents property to a value "none", It disables the link and doesn’t respond to the any cursor or touch events.

If you’re using the CSS class names, you can add the pointer-events: none to the anchor tag <a> CSS class name.

<a routerLink="/users" class="disable-link">Bikes</a>

Here is the css code for the disable-link class:

.disable-link{
    pointer-events: none;
}