Angular2, what is the correct way to disable an anchor element?

Question

I'm working on an Angular2 application, and I need to display -- but disable an <a> HTML element. What is the correct way to do this?

Updated

Please note the *ngFor, this would prevent the option of using *ngIf and not rendering the <a> altogether.

<a *ngFor="let link of links"
   href="#" 
   [class.disabled]="isDisabled(link)" 
   (click)="onClick(link)">
   {{ link.name }}
</a>

The TypeScript component has a method that looks like this:

onClick(link: LinkObj) {
    // Do something relevant with the object... 
    return false;
}

I need to actually prevent the element from being clickable, not just appear that it is with the CSS. I was assuming that I needed to potentially bind to the [disabled] attribute at first, but this is incorrect as the anchor element doesn't have a disabled property.

I looked at and considered using the pointer-events: none but this prevents my style of cursor: not-allowed from working -- and this is part of the requirement.

score 118 · Accepted Answer · edited Dec 15 '17 at 15:30

118

Specifying pointer-events: none in CSS disables mouse input but doesn't disable keyboard input. For example, the user can still tab to the link and "click" it by pressing the Enter key or (in Windows) the ≣ Menu key. You could disable specific keystrokes by intercepting the keydown event, but this would likely confuse users relying on assistive technologies.

Probably the best way to disable a link is to remove its href attribute, making it a non-link. You can do this dynamically with a conditional href attribute binding:

<a *ngFor="let link of links"
   [attr.href]="isDisabled(link) ? null : '#'"
   [class.disabled]="isDisabled(link)"
   (click)="!isDisabled(link) && onClick(link)">
   {{ link.name }}
</a>

Or, as in Günter Zöchbauer's answer, you can create two links, one normal and one disabled, and use *ngIf to show one or the other:

<ng-template ngFor #link [ngForOf]="links">
    <a *ngIf="!isDisabled(link)" href="#" (click)="onClick(link)">{{ link.name }}</a>
    <a *ngIf="isDisabled(link)" class="disabled">{{ link.name }}</a>
</ng-template>

Here's some CSS to make the link look disabled:

a.disabled {
    color: gray;
    cursor: not-allowed;
    text-decoration: underline;
}

edited Dec 15 '17 at 15:30

benek

2,088
2
26
38

answered May 02 '16 at 16:49

Michael Liu

52,147
13
117
150

1

Even the the `` element lacks an `href` it is still clickable, I just verified this...what now? Still not perfect. – David Pine May 03 '16 at 13:39
1

@DavidPine: I've updated my answer to handle the `click` event. – Michael Liu May 03 '16 at 15:02
the BIG disadvantage you will lose the SEO on this process, have a look: https://webmasters.stackexchange.com/questions/74032/what-is-the-seo-impact-of-using-an-anchor-tag-without-a-href-attribute – jcdsr Jan 08 '18 at 10:03
You can also use `[attr.disabled]="isDisabled(link)"` in tag. – Sri Jul 19 '18 at 03:52
2

@Sriram: **Do not** use `[attr.disabled]` on an `` tag. It's not standards compliant and only works in Internet Explorer, not in Chrome or Firefox. – Michael Liu Jul 19 '18 at 13:53
1

just a note: dont call functions in angular from template in attributes like ngIf, its performance issue, as they are called x-times each seccond, unless the components cd strategy is on push. Use properties, or directive or mentioned cd strategy. – niio Dec 21 '20 at 12:02

score 37 · Answer 2 · edited Jan 11 '17 at 12:36

37

For [routerLink] you can use:

Adding this CSS should do what you want:

a.disabled {
   pointer-events: none;
   cursor: not-allowed; 
}

This should fix the issue mentioned by @MichelLiu in the comments:

<a href="#" [class.disabled]="isDisabled(link)"
    (keydown.enter)="!isDisabled(link)">{{ link.name }}</a>

Another approach

<a [routerLink]="['Other']" *ngIf="!isDisabled(link)">{{ link.name }}</a>
<a  *ngIf="isDisabled(link)">{{ link.name }}</a>

Plunker example

edited Jan 11 '17 at 12:36

J0B

1,648
1
12
24

answered May 02 '16 at 14:39

Günter Zöchbauer

623,577
216
2,003
1,567

So I wouldn't want to bind to `[disabled]`, why not? – David Pine May 02 '16 at 14:41
1

The user can still tab to the link and press Enter. – Michael Liu May 02 '16 at 15:56
@MichaelLiu interesting So it would also require `(focus)="isDisabled(link) ? false : true"` – Günter Zöchbauer May 02 '16 at 15:58
`(focus)="false"` doesn't seem to prevent the user from tabbing to the link, at least in Chrome. – Michael Liu May 02 '16 at 16:28
@GünterZöchbauer Getting closer, but I still need the style of the anchor to be `cursor: not-allowed` when it is disabled. – David Pine May 02 '16 at 18:34
I'll have look when I'm back on the computer. – Günter Zöchbauer May 02 '16 at 18:37
Seems I misinterpreted your question a bit. I tried to fix it for `[routerLink]` which is a bit different than for normal anchor elements. @MichaelLiu approach breaks the [routerLink] though, therefore my approach might provide some value as well. – Günter Zöchbauer May 03 '16 at 14:51
@GünterZöchbauer When you set `pointer-events` to none, cursor styles are not applied. So you can use either one of those both together they make no sense. – Miroslav Jonas Feb 15 '17 at 12:23
Is this the same behabior in all browsers? AFAIR it differs. – Günter Zöchbauer Feb 15 '17 at 13:08
2

@GünterZöchbauer Every Angular question I have searched for on SO, you have answered! Nice work! – JMK Nov 27 '17 at 21:07
2

@JMK thanks :D It was fun. Sadly not that much time anymore. – Günter Zöchbauer Nov 27 '17 at 21:20

vineetk27 · Answer 3 · 2018-07-05T04:34:37.490

9

My answer might be late for this post. It can be achieved through inline css within anchor tag only.

<a [routerLink]="['/user']" [style.pointer-events]="isDisabled ?'none':'auto'">click-label</a>

Considering isDisabled is a property in component which can be true or false.

Plunker for it: https://embed.plnkr.co/TOh8LM/

edited Jul 05 '18 at 04:34

answered Jun 21 '18 at 16:55

vineetk27

101
1
4

I do not believe this is correct. Angular still propagates the (click) binding, as such it would still occur. Please create a plunker with this and share it here. – David Pine Jun 21 '18 at 18:26
@DavidPine I add one plunker for it. https://embed.plnkr.co/TOh8LM/ I just gave reference for href tag in that, similarly it can work with `routerLink` directive within anchor tag – vineetk27 Jul 01 '18 at 14:18

score 6 · Answer 4 · answered May 12 '17 at 12:24

Just came across this question, and wanted to suggest an alternate approach.

In the markup the OP provided, there is a click event binding. This makes me think that the elements are being used as "buttons". If that is the case, they could be marked up as <button> elements and styled like links, if that is the look you desire. (For example, Bootstrap has a built-in "link" button style, https://v4-alpha.getbootstrap.com/components/buttons/#examples)

This has several direct and indirect benefits. It allows you to bind to the disabled property, which when set will disable mouse and keyboard events automatically. It lets you style the disabled state based on the disabled attribute, so you don't have to also manipulate the element's class. It is also better for accessibility.

For a good write-up about when to use buttons and when to use links, see Links are not buttons. Neither are DIVs and SPANs

Seems the simplest to me without having to play css and javascript games. Of course, it requires that you use Bootstrap. — Matt, Jun 01 '22 at 21:41

score 6 · Answer 5 · answered Oct 09 '19 at 06:45

6

consider the following solution

.disable-anchor-tag { 
  pointer-events: none; 
}

answered Oct 09 '19 at 06:45

Sahil Ralkar

2,331
23
25

score 2 · Answer 6 · answered Jun 01 '18 at 17:54

   .disabled{ pointer-events: none }

will disable the click event, but not the tab event. To disable the tab event, you can set the tabindex to -1 if the disable flag is true.

<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
     <a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>

score 1 · Answer 7 · answered Jul 03 '20 at 16:03

1

This is for anchor tags that act as tabs:

[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"

answered Jul 03 '20 at 16:03

Henry

631
10
21

score 1 · Answer 8 · answered Dec 31 '21 at 06:15

1

instead of class.disabled, we can also bind a variable with the disabled attribute. This will be used only buttons, inputs and dropdowns. HTML disabled Attribute

For Example:

<button [disabled]="isDisabled">Test</button>

Demo

answered Dec 31 '21 at 06:15

Vignesh

302
3
12

score 0 · Answer 9 · edited Jul 19 '18 at 09:16

0

I have used

tabindex="{{isEditedParaOrder?-1:0}}" 
[style.pointer-events]="isEditedParaOrder ?'none':'auto'"

in my anchor tag so that they can not move to anchor tag by using tab to use "enter" key and also pointer itself we are setting to 'none' based on property 'isEditedParaO rder' whi

edited Jul 19 '18 at 09:16

Marvin Fischer

2,552
3
23
34

answered Jul 19 '18 at 08:42

guest

9
1

score -2 · Answer 10 · answered Dec 28 '17 at 01:58

-2

You can try this

<a [attr.disabled]="someCondition ? true: null"></a>

answered Dec 28 '17 at 01:58

Vincent Shen

83
1
1
8

As a word of explanation about why folk likely voted down this seemingly good answer it does not add `disabled` to the anchor element (I wish it did!) but rather adds `disabled="true"`. – Mike Poole Jun 11 '21 at 11:21

score -2 · Answer 11 · answered Jun 01 '19 at 12:32

-2

Just use

<a [ngClass]="{'disabled': your_condition}"> This a tag is disabled</a>

Example:

 <a [ngClass]="{'disabled': name=='junaid'}"> This a tag is disabled</a>

answered Jun 01 '19 at 12:32

Pullat Junaid

3,224
3
25
25

This does not work, while it will make it appear to be disabled - it is in fact still clickable, thus not at all solving the problem. – David Pine Jun 07 '19 at 12:18
Here is the correct answer... https://stackoverflow.com/a/36987506/2410379 – David Pine Jun 10 '19 at 00:40

Angular2, what is the correct way to disable an anchor element?

11 Answers11

Linked

Related