CODEWITHSUNDEEP
htmlangulartypescript
UIAPPDEVELOPER
UIAPPDEVELOPER

Reputation: 649

How to uncheck a checkbox onclick a button in angular 7

I have few checkboxes,whose Value is coming from loop,Here my requirement is only onload all checkbox will be checked by default,but on click clear button all checkbox should be unchecked,Here is the code below

home.component.html

<li *ngFor="let child of nestedjson; let i = index"><input type="checkbox" checked>{{child.name}}</li>
<div><button (click)="clear()" type="submit">clear</button></div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import Speech from 'speak-tts';
import { RxSpeechRecognitionService, resultList, } from '@kamiazya/ngx-speech-recognition';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],

  providers: [ RxSpeechRecognitionService ]
})
export class HomeComponent implements OnInit {  
    showit:any;
    nestedjson:any;
 constructor(private formBuilder: FormBuilder,public service: RxSpeechRecognitionService) {
     }

  ngOnInit() {
       this.nestedjson = [
        { name: "parent1", value: ["child11", "child12"] },
        { name: "parent2", value: ["child2"] },
        { name: "parent3", value: ["child3"] }
      ];
      this.showit = true;

} 

clear(){

}

}

Upvotes: 2

Views: 9621

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

Working Demo

.html

<li *ngFor="let child of nestedjson; let i = index">
  <input type="checkbox" [(ngModel)]="child.checked">
  {{child.name}}
</li>

<div><button (click)="clear()" type="submit">clear</button></div>

.ts:

nestedjson = [
    { name: "parent1", value: ["child11", "child12"], checked: true },
    { name: "parent2", value: ["child2"], checked: true },
    { name: "parent3", value: ["child3"], checked: true }
  ];

  clear() {
    this.nestedjson.forEach(child => {
      child.checked = false
    })
  }

If you cannot change the json, do this:

.ts

checkedItems = this.nestedjson.map(x => ({ name: x.name, checked: true }));

.html

<li *ngFor="let child of nestedjson; let i = index">
  <input type="checkbox" [(ngModel)]="checkedItems[i].checked">
  {{child.name}}
</li>

Upvotes: 2

Related Questions