Angular click checkbox without checking it

Question

I have this checkbox in my Angular project:

<input type="checkbox" id="approve_required" (change)="onClick($event,'approve_required',data)" [checked]="isChecked">

When the checkbox is clicked, I actually first want to check if it is even allowed to set it on checked. Because if not, the checkbox should remain unchecked and instead a modal will open. The way it is now, it is clicked and appears as checked immediately even if I set "isChecked" false after checking a condition in my onClick function.

Is there a way to do this?

Answer 1

In template (html),

<input type="checkbox" id="approve_required" [(ngModel)]="isChecked" (ngModelChange)="onClick($event,'approve_required',data)">

In ts,

onClick(value, value1, data){
  this.isChecked = false;
  // open modal here
}