How to reuse the same angular component inside the component itself?

Issue

I have the following parent and child component, and I am passing in data from parent component to child component. I am displaying parentData.name in child component if parentData.isFolder===false, and trying to reuse the child component if parentData.isFolder===true. I would like to use the same child component multiple times until I have no data with with parentData.isFolder===true.

I attempted the following and getting

Error: Maximum call stack size exceeded

Attempted working stackblitz example

If it's not the right way to achieve this, is there any other ways?

parent-component.componet.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.compoent.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>

Solution

The reason you have an error "Error: Maximum call stack size exceeded" is that you didn't do anything on the parentData when it is true and it will always return as true, so what you have there is an infinite recursion.

I guess what you are trying to achieve is a tree.

If so, I changed the codes to get what you want.

• parent.component.html - I changed the html to pass in the array instead of only an object into your child component.
• parent.component.ts - I added a subFolders array inside the parentData to simulate subfolders UI for your tree. You can also change the property name subFolders to parentData to avoid confusion
• child.component.html - I reworked the html you made. I iterated the parentData array that the child component received from the parent component and displayed the folder name. Then, I added the child component again to achieve the recursion of folders until the property isFolder is false.
• child.component.ts - No changes were made.

I also created a stackblitz based on the stackblitz you made.

parent.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',
        subFolders: [{
          name: 'Example file 1',
          isFolder: false,
          Id: '111',
        }, ],
      },
      {
        name: 'Example file 2',
        isFolder: false,
        Id: '222',
      },
      {
        name: 'Example file 3',
        isFolder: false,
        Id: '333',
      },
    ];
  }
}

parent.component.html

<app-child-component [parentData]="parentData"></app-child-component>

child.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.html

<ng-container *ngFor="let item of parentData">
  <ul>
    <li>{{ item.name }}</li>
    <app-child-component [parentData]="item.subFolders" *ngIf="item.subFolders"></app-child-component>
  </ul>
</ng-container>

Result:

Answered By - dom.macs