Angular2 disable click on div

Question

I tried lots and search numbers of time but I didnt get any solution to disable click on div element. Already question has been asked but they are saying not possible on divs and I want to know only, is there any ways to disable div in angular2

<div>(click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
   [class.isDisabled]="isDisabled"></div>

And the old answer not clearly about disabling divs and pointer-events:none is not supported in old version browser also it become editable from network tab

How is div even enabled? You have to actually programmatically make clicks on div even do anything, what would you disable? — Roberto Zvjerković
– Roberto Zvjerković, Commented May 8, 2018 at 13:39
Could you post some of your code so we can see what you have tried? — Justin Pearce
– Justin Pearce, Commented May 8, 2018 at 13:40
@ritaj , I need to restrict divs to be clicked till my request has been completed — Mohammad Raheem
– Mohammad Raheem, Commented May 8, 2018 at 13:55

Lazaro Henrique · Accepted Answer · 2018-05-08 13:42:45Z

13

You can use css:

pointer-events:none

Or maybe could do something like:

<div (click)="false; $event.stopPropagation();"> </div>

There are several ways of preventing a click, depends on what you need

answered May 8, 2018 at 13:42

Lazaro Henrique

6677 silver badges9 bronze badges

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

1 Comment

Mohammad Raheem Over a year ago

I just need to restrict the click event on divs thats it, but without css

NBash · Accepted Answer · 2021-12-09 09:43:44Z

2

The straightforward answer here will be just not to render the function if the element should be disabled. Something like this:

<div (click)="shouldBeDisabled ? null : callYourFunctionHere()"></div>

But a better solution will be to put this condition into your function itself

HTML

<div (click)="callYourFunctionHere()"></div>

TS

const callYourFunctionHere = () => {
  if (this.shouldBeDisabled) return
  
  //if statement above is false your general logic will be rendered
}

answered Dec 9, 2021 at 9:43

NBash

5151 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular2 disable click on div

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related