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

Dealing with the dynamic nature of links

In instances where you have dynamic links powered by *ngFor, you can use a method to verify the disabling condition:

isDisabled(link: any): boolean {
  // Here's where magic happens or not
}


Now integrate this method within your template to ensure a de-cluttered view:

<a *ngFor="let link of links" 
   href="#" 
   (click)="isDisabled(link) && $event.preventDefault()"
   [class.disabled]="isDisabled(link)">
   {{ link.text }}
</a>


The art of toggling anchors with structural directives

At times, we may want to toggle between clickable and non-clickable states of an anchor tag, a feat that can be effectively achieved using the *ngIf directive:

<!-- The hero link -->
<a *ngIf="!isDisabled; else disabledLink" href="http://example.com">Go forth and conquer</a>
<!-- The doppelganger -->
<ng-template #disabledLink>
  <span class="disabled-link">Sorry. Not today.</span>
</ng-template>


Of course, couple it with CSS for that visibly disabled look:

.disabled-link {
  color: grey; /* 50 shades anyone */
  cursor: not-allowed;
  text-decoration: none;
}


This two-state switchover furnishes clear visual feedback; and is accessible, thus avoiding confusion for users relying on assistive technologies.

Switch to button semantics for improved accessibility

Should accessibility take precedence, it might be worth your while to swap the <a> element for a <button> refined to resemble a link:

<button [disabled]="isDisabled">A sheep in wolf's clothing</button>


Transform the <button> to mimic a hyperlink:

button {
  background: none;
  border: none;
  color: blue;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

button:disabled {
  color: grey; /* Back to vanilla */
  pointer-events: none;
  text-decoration: none;
}


This strategy capitalizes on the inherent disabled nature of the <button>, thus enhancing the semantic depth and accessibility.

Examining the UX impact

When deciding to disable elements, it's crucial to keep the user experience (UX) in sharp focus. A disabled element should be clearly distinguishable to avert user frustration. Always validate your approach within the context of user interaction and accessibility standards.