CODEWITHSUNDEEP
angulartypescript
user5843610
user5843610

Reputation:

Angular Disable href using TS

I been having problem with disabling an href using Angular and Typescript and I am not sure if I am going in the correct path.

Is there a better way to do something like this? looking for something like this with the red circle

enter image description here

ts

ReadOnlyStyleGuideNotes: boolean;

  ngOnInit() {
    this.ReadOnlyStyleGuideNotes = true;
  }

html

<a href="#" 
*ngIf="note.Edited || note.Removed" 
(click)="restoreDefault(note)" 
style="font-size: 12px"
data-disabled="readOnlyStyleGuideNotes">
restore defaults
</a>

css class

 a[data-disabled=true] {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

Upvotes: 0

Views: 177

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27293

Use pointer events None and wrap the a element with span so that you can apply cursor

 <span [ngStyle]="{'cursor':readOnlyStyleGuideNotes ? 'not-allowed' :''}"><a 
 [ngClass]="{'disable':readOnlyStyleGuideNotes}" href="#"  
 (click)="restoreDefault(note)" 
 style="font-size: 12px">
 restore defaults</a></span>

css

.disable{
  color: currentColor; 
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}

Example:https://stackblitz.com/edit/angular-22f9ts

Upvotes: 1

Related Questions