Angular Disable href using TS

Question

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

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

Chellappan வ · Accepted Answer · 2018-10-30 15:34:25Z

1

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

edited Oct 30, 2018 at 15:34

answered Oct 30, 2018 at 15:23

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

user5843610 Over a year ago

when I set readOnlyStyleGuideNotes = false; it looks like disable?

Chellappan வ Over a year ago

you mean the color?

user5843610 Over a year ago

Correct it is still that light gray

Chellappan வ Over a year ago

can you check the stackblitz now

user5843610 Over a year ago

One last problem can I use a custom css class and not use span{} and a{}?

|

Collectives™ on Stack Overflow

Angular Disable href using TS

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related