I'm currently working on a task where I need to pass data from a parent component to a child component. The data consists of an array that is nested within another array.
parent.component.html
<div *ngFor="let parent of parentArray; index as mainIdx" class="main-container" #mainDiv>
<button (click)="addChild(mainIdx)"><i class="fa fa-plus"></i></button>
<button (click)="addSibling(mainIdx)"><i class="fa fa-plus"></i></button>
<button (click)="removeSibling(mainIdx)"><i class="fa fa-minus"></i></button>
<app-child *ngFor="let child of parent.childArray" [childData]="parent.childArray"></app-
child>
</div>
parent.component.ts
addChild(parentIndex: number){
let childId: number;
if(this.parentArray[pIndex].childArray === undefined){
this.parentArray[pIndex]['childArray'] = [];
this.parentArray[pIndex].childArray.push({id: 0})
}
else{
childId = this.parentArray[pIndex].childArray.length;
this.parentArray[pIndex].childArray.push({id: childId})
}
}
child.component.ts
@Input() childData: any[];
ngOnInit(): void {
console.log(this.childData);
}
addGrandChild(){
this.childAdded = true;
}
child.component.html
<div class="child-container">
<button (click)="addGrandChild()"><i class="fa fa-plus"></i></button>
<button (click)="removeChild()"><i class="fa fa-minus"></i></button>
<app-child *ngIf="childAdded"></app-child>
</div>
I am striving to create a tree-like structure with dynamically generated children and grandchildren. Each parent can have siblings and children, while each child can have grandchildren, continuing on indefinitely. I have successfully generated the components, but there seems to be an issue with passing data from the parent to the child.