Disabled button is still clickable in angular material

Question

<a  md-icon-button [routerLink]="['./new']" queryParamsHandling="merge"
                mdTooltip="Add Document" [disabled]="isAddButtonDisabled(selectedAssociation)">
                <md-icon>add</md-icon>
            </a>

The button is firing click event even when the button is disabled. Is there a way to prevent the click?

Possible duplicate of [How to disable HTML links](https://stackoverflow.com/questions/10276133/how-to-disable-html-links) — Igor, Nov 08 '18 at 02:33
hope this will help https://stackoverflow.com/questions/36985112/angular2-what-is-the-correct-way-to-disable-an-anchor-element — Usman, Nov 08 '18 at 03:10

score 1 · Accepted Answer · answered Nov 08 '18 at 02:26

You cannot disable the achor tag - try to hide the anchor tag by wrapping it inside a div or use css to disable the anchor tag

Whereas [disabled] is a property binding it can hold only a property value - you are trying to bind a function to it - I'm not sure this will work - please check

Happy coding !!

Anzor Asadov · Answer 2 · 2019-04-03T17:19:29.700

-2

Try this CSS rule:

[disabled]{
  pointer-events: none;
}

edited Apr 03 '19 at 17:19

answered Apr 02 '19 at 13:56

Anzor Asadov

275
2
12

This will only change the cursors appearance, it won't prevent any click events – Matt Apr 02 '19 at 14:21
Yep, accidentally removed the wrong line when pasted my code. Thanks! – Anzor Asadov Apr 03 '19 at 17:20

Disabled button is still clickable in angular material

2 Answers2