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.
This question is related to
html
dom
typescript
angular
angular2-template
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
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>
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>
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/
You can try this
<a [attr.disabled]="someCondition ? true: null"></a>
This is for anchor tags that act as tabs:
[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"
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
.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>
consider the following solution
.disable-anchor-tag {
pointer-events: none;
}
Source: Stackoverflow.com