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