I am dealing with a parent and child component scenario where I need to pass data from the parent component to the child component. The aim is to display parentData.name in the child component when parentData.isFolder===false, and if parentData.isFolder===true, then reusing the child component until there are no more instances of parentData.isFolder===true.
However, my attempts have resulted in an error message:
Error: Maximum call stack size exceeded
Here's a StackBlitz example that I tried.
If this approach is incorrect, is there another way to achieve the desired outcome?
parent-component.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent-component',
templateUrl: './parent-component.component.html',
styleUrls: ['./parent-component.component.css'],
})
export class ParentComponentComponent implements OnInit {
public parentData;
constructor() {}
ngOnInit() {
this.parentData = [
{
name: 'Example file 1',
isFolder: true,
Id: '111',
},
{
name: 'Example file 2',
isFolder: false,
Id: '222',
},
{
name: 'Example file 3',
isFolder: false,
Id: '333',
},
];
}
}
parent-component.component.html
<ng-container *ngFor="let item of parentData">
<app-child-component [parentData]="item"></app-child-component>
</ng-container>
child-component.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './child-component.component.html',
styleUrls: ['./child-component.component.css'],
})
export class ChildComponentComponent implements OnInit {
@Input() public parentData;
constructor() {}
ngOnInit() {}
}
child-component.component.html
<!-- Display names when isFolder === false -->
<ng-container *ngIf="parentData.isFolder === false">
<ul>
<li>{{ parentData.name }}</li>
</ul>
</ng-container>
<!-- Reuse the app-child-component if isFolder === true -->
<ng-container *ngIf="parentData.isFolder === true">
<app-child-component [parentData]="parentData"> </app-child-component>
</ng-container>