How to show all objects from elements inside elements untill the last element in Angular?

Question

Right at the moment, I am trying to solve a problem I have inside Angular. The problem is that I have one big object, which contains multiple objects of the same type in a array, which also can contain the same objects inside the array of it. I know that it sounds a little complicated but I will try to explain it better in the rest of my text.

export class Parameter {
  name: number;
  subject: string;
  type: string;
  comparison: string;
  colour: string;
  givenValue: number;
  tree: string;
  children: Parameter[];
}

I already tried a hunderd words/sentences to find someone with the same question but could not find one. Maybe I am trying to explain my question different/not right? I don't know but I am facing this problem for some days an I got rid of it.

Beneath here you can see my HTML code made with angular to see every object in the object and the objects inside. The problem I face is that I am just able to see the first object, and the objects inside that object. But I could not get is so far to let it automatically show all objects untill the end. As you can see I show the second layer in the abject hard coded with a ngfor.

<div class="accordion" *ngFor="let currentParameter of smartContract.parameters">
  <mat-accordion>
    <mat-expansion-panel>

      <mat-expansion-panel-header>
        <mat-panel-title>
          Parameter {{currentParameter.name}}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div class="parameter">
        <div class="inputs">
          <div class="input">
            <mat-form-field>
              <mat-select placeholder="Kies een categorie">
                <mat-option *ngFor="let category of categories"
                            [value]="category.value"
                            (click)="currentParameter.subject = category.value"
                > {{category.viewValue}} </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </div>

      <mat-expansion-panel *ngFor="let currentParameterOfChild of currentParameter.children" > <!-- dit is de plaats van een nieuwe parameter in een nieuwe laag - begin -->
        <mat-expansion-panel-header>
          <mat-panel-title>
            Parameter {{currentParameterOfChild.name}}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="parameter">
          <div class="inputs">
            <div class="input">
              <mat-form-field>
                <mat-select placeholder="Kies een categorie">
                  <mat-option *ngFor="let category of categories"
                              [value]="category.value"
                              (click)="currentParameterOfChild.subject = category.value"
                  > {{category.viewValue}} </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>
        </div>

        <div class="add-parameter-layer">
          <button mat-mini-fab class="plusbutton" [mat-menu-trigger-for]="param1" type="button">
            <mat-icon aria-label="Icon-button with plus">add</mat-icon>
          </button>
          <mat-menu #param1="matMenu">
            <button mat-menu-item type="button" >
              <span (click)="newParameterNewLayer(currentParameterOfChild.name, currentParameterOfChild.tree)">Nieuwe parameter in nieuwe laag</span>
            </button>
            <button mat-menu-item type="button">
              <span (click)="newParameter()">Nieuwe parameter in deze laag</span>
            </button>
          </mat-menu>
        </div>
      </mat-expansion-panel> <!-- dit is de plaats van een nieuwe parameter in een nieuwe laag - begin -->

      <div class="add-parameter-layer">
        <button mat-mini-fab class="plusbutton" [mat-menu-trigger-for]="param1" type="button">
          <mat-icon aria-label="Icon-button with plus">add</mat-icon>
        </button>
        <mat-menu #param1="matMenu">
          <button mat-menu-item type="button" >
            <span (click)="newParameterNewLayer(currentParameter.name, currentParameter.tree)">Nieuwe parameter in nieuwe laag</span>
          </button>
          <button mat-menu-item type="button">
            <span (click)="newParameter()">Nieuwe parameter in deze laag</span>
          </button>
        </mat-menu>
      </div>

    </mat-expansion-panel>
  </mat-accordion>
</div>

I know, my bad English is very bad and I would like to apologize for this. But I really need help for this right now. I need to show div's inside div's untill I am in the last object how contains variables.

Answer 1

You can achieve that by using recursive components. They are explained in detail here.

Roughly explained, you want to use a component inside its own template. Move the code that needs to be run recursively inside its own component and use the component itself there, based on the presence of the children property.

@Component({
   selector: 'app-recursive'
   template: `
      <ng-container*ngFor="let child of entry.children">
          <!-- Your content, omitted for readability -->
          <app-recursive *ngIf="child.children && child.children.length > 0" [entry]="child"></app-recursive>
      </ng-container>
   `
})
class AppRecursiveComponent {
   @Input() entry:Parameter;
}

Then, inside your template, just use <app-recursive [entry]="parameterRoot"></app-recursive>