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

Possible duplicate of [How to disable clicking inside div](https://stackoverflow.com/questions/28083708/how-to-disable-clicking-inside-div) — bugs, May 08 '18 at 13:38
How is `div` even `enabled`? You have to actually programmatically make clicks on div even do anything, what would you disable? — Roberto Zvjerković, May 08 '18 at 13:39
Could you post some of your code so we can see what you have tried? — Justin Pearce, May 08 '18 at 13:40
@ritaj , I need to restrict divs to be clicked till my request has been completed — Mohammad Raheem, May 08 '18 at 13:55
If the div is visible, the user can click on it. What is it, when the user clicks on the div, that you actually want to prevent? — ConnorsFan, May 08 '18 at 13:57
but its visible, somehow I just need to be non clickable or further click not happen till the request get completed, is there any way or any solution or any other way — Mohammad Raheem, May 08 '18 at 13:59
What happens when the user clicks on the div? What problem does it create? — ConnorsFan, May 08 '18 at 14:01

score 13 · Answer 1 · answered May 08 '18 at 13:42

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 08 '18 at 13:42

Lazaro Henrique

527
5
7

1

I just need to restrict the click event on divs thats it, but without css – Mohammad Raheem May 08 '18 at 13:53

score 1 · Answer 2 · answered Dec 09 '21 at 09:43

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
}

Angular2 disable click on div

2 Answers2