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

by

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

More Related Contents:

  1. Angular 5 FormGroup reset doesn’t reset validators
  2. Angular 2 Checkbox Two Way Data Binding
  3. Detect click outside Angular component
  4. Angular 2 Remove Hash (#) from the URL
  5. Dynamically ADDING and REMOVING Components in Angular
  6. How to convert input value to uppercase in angular 2 (value passing to ngControl)
  7. How to remove the previously selected option from a drop-down menu in a table?
  8. Angular2 disable button
  9. How to serve up images in Angular2?
  10. I want to create a color picker in ionic app [closed]
  11. What to use in place of ::ng-deep
  12. Why does my XPath query (scraping HTML tables) only work in Firebug, but not the application I’m developing?
  13. How can I scale the content of an iframe?
  14. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  15. How to declare a variable in a template in Angular
  16. Angular 2 Dropdown Options Default Value
  17. Show loading screen when navigating between routes in Angular 2
  18. Angular2 – should private variables be accessible in the template?
  19. How can I repeat a piece of HTML multiple times without ngFor and without another @Component?
  20. How does Selenium click on elements that are 50% on screen and 50% not on screen?
  21. Access Control Allow Origin issue in Angular 2
  22. Why is a self-closing iframe tag preventing further DOM elements to be displayed?
  23. Which DOM elements can be child of tr?
  24. How to show split header in the material table having nested group of data in angular
  25. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  26. Angular 2 input parameters on root directive [duplicate]
  27. Generate dynamic css based on variables angular
  28. Scroll to element on click in Angular 4
  29. Angular4 – Scrolling to anchor
  30. Get Angular2 routing working on IIS 7.5

Leave a Comment