During my development process, I faced a unique challenge that involved parent and child checkboxes at the same level. The desired behavior was to have children checkboxes automatically checked when the parent is checked, and vice versa. Although my HTML and component files seem to be functioning properly, there is a glitch when toggling between different parents after selecting children checkboxes. I welcome any suggestions for solving this issue!
import { Component } from '@angular/core';
import { Input, OnInit, OnDestroy, ViewChildren, ViewChild, ElementRef, QueryList } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChildren('fundMenu') public fundMenu: QueryList<any>;
@ViewChildren('accountMenu') public accountMenu: ElementRef;
@ViewChild('allchkbox') public allchkbox: ElementRef;
fun = false;
// more code...
public checkAllAccount(account: any, selectToggle: any, val: any):void {
if(val === 'ALL') {
//this.accountMenu = this.selectAllParentCheckBox(this.accountMenu, false, this.allchkbox);
// this.fundMenu = this.selectAllParentCheckBox(this.fundMenu, false, this.allchkbox);
} else {
console.log(this.fundMenu);
console.log(this.accountMenu);
this.fundMenu = this.selectAllCheckBox(this.fundMenu,false,val);
}
}
// additional methods...
}<hello name="{{ name }}"></hello>
// more HTML code...