Event click while unchecking a checkbox in angular

Question

I have a checkbox where when enabled shows a div tag which shows "hyyj". What I need is that when I disable it we should be able to hide the div tag. I am posting the stackblitz link down here

https://stackblitz.com/edit/angular-vhxjkt?file=src%2Fapp%2Fapp.component.html

Answer 1

Change the implementation of checkBtn to be this:

checkBtn() {
    this.ischeck = !this.ischeck;
  }

This time it will assign it to be the opposite of its current value and it should work as you requested.

Or if you want to write a bit more code:

checkBtn() {
  if (this.isCheck === true) { // can also just be if (this.isCheck)
    this.isCheck = false;
  } else {
    this.isCheck = true;
  }
}

Answer 2

What about using [(ngModel)] ?

You can set it like this.

<td> <input type="checkbox" id="vehicle1" [(ngModel)]="ischeck" name="vehicle1" value="Bike"></td>

Here every time the value of checks change you'll get the result into ischeck variable.

I Hope it could help you.

Answer 3

You can do it by using several ways.

1. You can pass $event object along with checkBtn event. Keep value in a sync with model.

   (click)="checkBtn($event)"
   
   checkBtn({target: {checked }}) {
       this.ischeck = checked;
   }
   

   Forked Stackblitz

2. Either use template or model driven form.

   <input [(ngModel)]="isChecked" #checkbox 
     type="checkbox" id="vehicle1" name="vehicle1">
   

   Forked Stackblitz (template driven)