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

Judoka

Possible duplicate of How to disable clicking inside div – Launceston

How is div even enabled? You have to actually programmatically make clicks on div even do anything, what would you disable? – Snowwhite

Yeh, I checked but the answer not supporting in old browser – Judoka

Could you post some of your code so we can see what you have tried? – Freddiefreddy

@ritaj , I need to restrict divs to be clicked till my request has been completed – Judoka

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? – Bruce

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 – Judoka

What happens when the user clicks on the div? What problem does it create? – Bruce

Answer 1

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

Phoebephoebus

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

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

Such