Angular2, What Is the Correct Way to Disable an Anchor Element

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

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;
}

[attr.disabled]=true does not working in anchor tag

There is no disabled attribute for hyperlinks in html. Reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a. Hence you can use css to achieve this.

CSS Code :

    text-decoration:none;
    cursor:default;
    color:grey;
    pointer-events:none;

Disabled href tag

There is no disabled attribute for hyperlinks. If you don't want something to be linked then you'll need to remove the <a> tag altogether.

Alternatively you can remove its href attribute - though this has other UX and Accessibility issues as noted in the comments below so is not recommended.

How do you make an a link disabled using condition?

Credits to styles to this excellent post in css-tricks.

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  pointer-events: none
  opacity: 0.5;
  text-decoration: none;
}

<a [ngClass]="{'isDisabled':condition}"
   class="btn btn-primary btn-lg disabled" 
   href="https://mailtrap.io/inboxes/354346/messages" 
   target="_blank" (click)=f.form.reset() > Verify your Email Now</a>

How to disable the div tag in angular 2

You can add the attribute like

<div [attr.disabled]="isDisabled ? true : null">

but <div> doesn't support the disabled attribute.

Perhaps this is what you want

<div (click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
   [class.isDisabled]="isDisabled"></div>

with some custom CSS that makes .isDiabled look disabled.

It might be better to create a method to put the code there instead of inline.

Passive Link in Angular 2 - a href= equivalent

If you have Angular 5 or above, just change

<a href="" (click)="passTheSalt()">Click me</a>

into

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

A link will be displayed with a hand icon when hovering over it and clicking it won't trigger any route.

Note: If you want to keep the query parameters, you should set queryParamsHandling option to preserve:

<a [routerLink]=""
   queryParamsHandling="preserve"
   (click)="passTheSalt()">Click me</a>

Test a disabled anchor does not change current location when clicked

So I guess the best option here is to set the routerLink to null if you want the anchor to have no effect when clicked.

import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { async, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

@Component({
    template: `
        <a [routerLink]="disabled ? null : target">click me</a>
    `,
})
class LinkComponent {
    target = '/destination';
    disabled = true;
}

@Component({ template: '' })
class FakeComponent {}

describe('DisabledLinkComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule.withRoutes([{ path: 'destination', component: FakeComponent }])],
            declarations: [LinkComponent, FakeComponent],
        }).compileComponents();
    }));

    it('should not change location when disabled and clicked', async () => {
        const fixture = TestBed.createComponent(LinkComponent);
        fixture.componentInstance.disabled = true;
        fixture.detectChanges();

        fixture.nativeElement.querySelector('a').click();
        await fixture.whenStable();

        expect(TestBed.get(Location).path()).not.toBe('/destination');
    });

    it('should change location when not disabled and clicked', async () => {
        const fixture = TestBed.createComponent(LinkComponent);
        fixture.componentInstance.disabled = false;
        fixture.detectChanges();

        fixture.nativeElement.querySelector('a').click();
        await fixture.whenStable();

        expect(TestBed.get(Location).path()).toBe('/destination');
    });
});

How can I conditionally disable the routerLink attribute?

Disable pointer-events on the element via CSS:

<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>

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

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

or

<a *ngIf="isEnabled" [routerlink]="xxx">Link</a>
<div *ngIf="!isEnabled">not a link</div>

or to easily reuse the disabled link template

<ng-template #disabledLink>
  <div *ngIf="!isEnabled">not a link</div>
</ng-template>
<a *ngIf="isEnabled; else disabledLink" [routerLink]="xxx">Link</a>

Angular 2+ attr.disabled is not working for div when I try to iterate ngFor loop

Disabled cannot be used for a div element and only applied to the below elements

<button>    
<fieldset>  
<input> 
<keygen>    
<optgroup>  
<option>    
<select>    
<textarea>  

See this

So for your issue, you can handle it by using:

<div 
  class="choice" 
  data-toggle="wizard-slot" 
  [class.disabled]="item.status" 
  (click)="slotSelected($event)">
  <input 
    type="radio" 
    name="slot" 
    value="{{item.timeSlot}}" 
    [disabled]="item.status">
  <span class="icon">{{item.timeSlot}}</span> {{item.status}}
</div>

and you should be adding styles

.disabled {
  cursor: not-allowed;
}

---

Related Topics