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