Hierarchy dropdown with nth child in angular 6. I want select parent checkbox need hide all it children checkbox

Question

Hierarchy dropdown with nth child in angular 6. I want select parent checkbox need hide all it children checkbox. I have tried up to 3rd level. but I need get up to nth level Please help me. My code.

app.component.ts

persons : any=[
  {Id:1 , Name: 'Ram',checked:false, disable:false,
   children:[{Id:1, Name: 'shyam', checked:false, disable:false, RID:1,
  children:[{Id:1, Name: 'shyam1',checked:false, disable:false,  RID:1, 
  children :[{Id:1, Name: 'Rambabu2', checked:false, disable:false,RID:1, 
  children:[{Id:1, Name: 'shyam1',checked:false, disable:false,RID:1}]}]}]},
   {Id:2, Name: 'Kumar',checked:false, disable:false, RID:1, children:[{Id:1, Name: 'shyam',checked:false, disable:false,RID:1,}]},
    {Id:3, Name: 'shyam3',checked:false, disable:false,RID:1,}]}
  ]



parentCheckbox(ev: any, node: any) {
  debugger;
  
  if (ev.target.checked) {
    this.disableAllChild(node)
  } else {
  }
}
disableAllChild(node: any) {
  debugger

  
  node?.children?.forEach((element:any) => {
    ;(element.checked = false), (element.disable = true)
    element?.children?.forEach((el:any) => {
      ;(el.checked = false), (el.disable = true)
    })
  })
}
}

app.componet.html

<ng-template #recursiveList let-persons>
  <tr *ngFor="let parents of persons">
    <td>
      <input
        type="checkbox"
        [disabled]="parents.disable"
        (change)="parentCheckbox($event, parents)"
      />
      {{ parents.Name }}
      <div > 
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: parents.children }">
          <td>
          
      </td>
        <span
        class="level-2-checkbox"
        [ngClass]="{ disableText: parents.children.disable }"
      ></span>
        </ng-container>
      </div>
      </td>

    </tr>
    </ng-template>
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: persons }"></ng-container>

Answer 1

If I understand your problem right, you can solve this with a simple tree traversal algorithm.

There are essentially two different possibilities to traverse the tree: depth-first which means you start at the parent go to a child and from there to another child until you end at a node without any children. Then you go back and repeat the same procedure with a sibling and so on. The other one is breadth-first where you first visit any node on one hierarchy level and then go on to the next hierarchy.

For your example you could use a recursive implementation of the depth-first algorithm like:

interface Person{
  Id:number;
  Name:string;
  checked:boolean;
  disable:boolean;
  children:Person[];
}

const persons : Person[]=[
  {Id:1 , Name: 'Ram',checked:false, disable:false,
   children:[
     {Id:1, Name: 'shyam', checked:false, disable:false, RID:1,
       children:[
         {Id:1, Name: 'shyam1',checked:false, disable:false,  RID:1, 
            children :[
               {Id:1, Name: 'Rambabu2', checked:false, disable:false,RID:1, 
                 children:[
                  {Id:1, Name: 'shyam1',checked:false, disable:false,RID:1}
                 ]
               }
            ]
         }
       ]
  },
  {Id:2, Name: 'Kumar',checked:false, disable:false, RID:1, 
   children:[
      {Id:1, Name: 'shyam',checked:false, disable:false,RID:1}
   ]},
  {Id:3, Name: 'shyam3',checked:false, disable:false,RID:1}]}
]

disableAllChild(node:Person){
  if(node == null) return;
  node.disable = true;
  //recursive call to disableAllChild for all children of the current node 
  node.children?.forEach(child => disableAllChild(child));
}