2

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.

Screenshot of the example app

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.

Community
  • 1
  • 1
scopchanov
  • 7,966
  • 10
  • 40
  • 68
  • Does this answer your question? [Disabled not working](https://stackoverflow.com/questions/47772278/disabled-not-working) – GSerg May 22 '20 at 22:59
  • @GSerg, nope, it does not. _There is no disabled attribute for hyperlinks._ It is a feature of `Angular Material`, hence the corresponding tag. – scopchanov May 22 '20 at 23:13

2 Answers2

0

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.

Diogo Santos
  • 49
  • 1
  • 5
  • _angular material is for design only_ - no, it is not. It does not simply add or remove classes. It changes the behavior too. I have extended my example to prove this. With `href` the disabled state works as expected. With the in-app-navigation counterpart of it, `routerLink` - it does not. – scopchanov May 23 '20 at 00:15
0

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

Abhinav Akhil
  • 173
  • 1
  • 7