I have the following code that should set the checked value to false on click:

@Component({
  template: `
    <input type="checkbox" [checked]="checked" (change)="onChange()">
   `
})
export class AppComponent  {

  checked = false;

  onChange() {
    setTimeout(() => {
      this.checked = false;
    }, 1000)
  }

}

The problem is that if we click on the input and we wait for a second, it'll stay checked. Why is this happening? Why Angular doesn't change it to false again?

I have the following code that should set the checked value to false on click:

@Component({
  template: `
    <input type="checkbox" [checked]="checked" (change)="onChange()">
   `
})
export class AppComponent  {

  checked = false;

  onChange() {
    setTimeout(() => {
      this.checked = false;
    }, 1000)
  }

}

The problem is that if we click on the input and we wait for a second, it'll stay checked. Why is this happening? Why Angular doesn't change it to false again?

• javascript
• angular
• typescript

• Please check my answer and let me know does it worked for you or not. Best wishes :-) – Srijon Chakraborty Commented Feb 18, 2021 at 10:33

3 Answers 3

Long story short Angular checkboxes are just broken : Issue

If you however want to achive this effect i will remend you to create your own custom ponent that will act the same way as a checkbox.

Here is one more fun example of Checkbox madnes try to interact with both "With track by" and "No track by" blocks and see what happens.

I think you can do that easily by using [(ngModel)]="checked". Your code is working in the stackblitz link. Please check that. Here is my code given below.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="checkbox" [checked]="checked" [(ngModel)]="checked" (change)="onChange()"  name="horns">
    <label for="horns">Horns</label>
   `,
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
   checked = false;

  onChange() {
    setTimeout(() => {
      this.checked = false;
    }, 2000)
  }
}

in angular you can manipulate dom using view child and element ref

first of all you need to import viewchild and elementRef in your ponent

app.ponent.ts

import { Component, VERSION } from "@angular/core";    
import { ViewChild, ElementRef } from "@angular/core";    

@Component({  
selector: "my-app",  
templateUrl: "./app.ponent.html",  
styleUrls: ["./app.ponent.css"]  
})  
export class AppComponent {  
@ViewChild("checkBox") el: ElementRef;  

onChange() {    
setTimeout(() => {  
  this.el.nativeElement.checked = false;  
 }, 100);  
}  
}

app.ponent.html

<input type="checkbox" #checkBox (click)="onChange()">

stackblitz