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

Question

I am working on an Angular2 application and I need to display but disable a <a> HTML element. What is the right way to do this?

Update

Pay attention to *ngFor , this will prevent the possibility of using *ngIf and will not fully display <a> .

 <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 clicked, and not just display with CSS . I assumed that I first need to bind the [disabled] attribute, but this is not true since the binding element does not have a disabled property.

I looked through and reviewed the use of pointer-events: none , but that does not allow my cursor: not-allowed style to work - and this is part of the requirement.

Answer 1

Specifying pointer-events: none in CSS disables mouse input but does not disable keyboard input. For example, the user can still connect to the link and click by pressing the Enter key or (on Windows) the ≣ Menu key. You can disable certain keystrokes by intercepting the keydown event, but this probably confuses users who rely on assistive technologies.

Probably the best way to disable the link is to remove the href attribute, which makes it not a link. You can do this dynamically with the conditional binding of the href attribute:

 <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 Gunter Zochbauer's answer, you can create two links, one normal and one disabled, and use *ngIf to display 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 are some CSS to disable the link:

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

Answer 2

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> 

Plunger example

Answer 3

Just stumbled upon this question and wanted to propose an alternative approach.

The markup provided by the OP has a click event binding. It makes me think that elements are used as “buttons”. If so, they can be marked as <button> elements and styled as links if this is the view you want. (For example, Bootstrap has a built-in link button style, https://v4-alpha.getbootstrap.com/components/buttons/#examples )

This has several direct and indirect advantages. This allows you to bind to the disabled property, which automatically disables mouse and keyboard events during installation. It allows you to style a disabled state based on a disabled attribute, so you don't need to control the class of an element either. It is also better for accessibility.

For a good record of when to use buttons and when to use links, see Links are not buttons. Also there is no DIV and SPAN .

Answer 4

  .disabled{ pointer-events: none } 

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

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

Answer 5

My answer may be late for this post. This can be achieved with inline CSS only inside the anchor tag.

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

Given that isDisabled is a component property that can be true or false .

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

Answer 6

I used

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

in my anchor tag so that they cannot go to the anchor tag using the tab, to use the enter key, as well as the pointer itself, we set it to no based on the property isEditedParaO rder whi

Answer 7

Just use CSS pointer events, as other people have said, but do so in your global stylesheet.

 a[disabled] { pointer-events: none; } 

Answer 8

You can try this

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