I currently have a situation where I have three checkboxes labeled as parent 1, parent 2, and parent 3. Initially, when the page loads, parent 1 and parent 3 are checked by default, while parent 2 is unchecked. However, when I manually check parent 2 and click on the clear button, only the checkboxes that were initially checked (parent 1 and parent 3) get unchecked, while parent 2 remains checked. Here is the code snippet related to this:
<li *ngFor="let child of nestedjson; let i = index">
<input type="checkbox" [checked]="child.checked">
{{child.name}}
</li>
<div><button (click)="clear()" type="submit">clear</button></div>
In the TypeScript file:
nestedjson = [
{ name: 'parent1', value: ['child11', 'child12'], checked: true },
{ name: 'parent2', value: ['child2'], checked: false },
{ name: 'parent3', value: ['child3'], checked: true },
];
clear() {
this.nestedjson.forEach((child) => {
child.checked = false;
});
}