Why does a disabled RouterLink still work?

Question

Problem

I have a problem with links, which are active, although their disabled attribute is set to true.

Setup

Following this pattern from the official documentation of Angular Material:

<a mat-button href="https://www.google.com/" target="_blank">Link</a>

I am building the navigation section of my app like this:

<nav>
    <a mat-button routerLink="/foo" [disabled]="true">Foo</a>
    <a mat-button routerLink="/moo" [disabled]="true">Moo</a>
    <a mat-button href="https://www.google.com/" target="_blank" [disabled]="true">Link</a>
</nav>

<router-outlet></router-outlet>

As shown in the picture, the links are indeed shown as inactive. However, only the href-link is trully disabled. The ones for the in-app navigation with routerLink still work and I am able to change the pages by clicking on them.

Example

I have prepared an example project on Stackblitz to demonstrate this issue.

How to make the disabled routerLinks inactive?

---

Update 1

For the sake of the experiment I have substituted the nav with mat-nav-list and the mat-buttons with mat-list-item like this:

<mat-nav-list>
    <a mat-list-item routerLink="/foo" [disabled]="true">Foo</a>
    <a mat-list-item routerLink="/moo" [disabled]="true">Moo</a>
    <a mat-list-item href="https://www.google.com/" target="_blank" [disabled]="true">Link</a>
</mat-nav-list>

Now it works as expected, but the outlook is not the one I want to have.

I can also substitute the a-tag with a button and add a click-listener calling Router.navigate, but as the title says, I would like to know Why does a disabled RouterLink still work and how to trully (not only visually) disable it.

---

Update 2

Meanwhile I have reported it as a bug to Angular Material.

Answer 1

I don't have enough rep to comment but it seems angular material is for design only, meaning you are disabling the CSS on the tag. If you want to stop the router, I think you need to do it on the typescript side, make a function to check whether the button is or isn't disabled and navigate or not accordingly.

Answer 2

Simple solution for this is to add, pointer-events: none to the css