[Solved] How to append children to object dynamically

by


The most easy way is pass as argument the index of “terms”. Put two buttons, one to AddTerms and another one to hideTerms/showTerms.

<div *ngFor = "let term of terms;let i=index">
 <!--see the way to get the index of the array -->
  <div class="row tr">
    {{term.id}}
    <!--you make a link, I use a button-->
    <!--the button "add" is visible when there're NOT "children"-->
    <button *ngIf="!term.terms" (click)="addTerms(i)">Add</button>  
    <!--the button to Show/hide is visible when there ARE "children"-->
    <button *ngIf="term.terms" (click)="term.show=!term.show">
      <span *ngIf="term.show">^</span>
      <span *ngIf="!term.show">v</span>
    </button>
  </div>
  <ng-container *ngIf ="term.terms && term.show">
    <app-icd-codes [terms]="term.terms"></app-icd-codes>
  </ng-container>
</div>

Then you must put your function addTerms. A simple function can be like

//see that you received the "index" of children
addTerms(index: number) {
    this.terms[index].show = true; //<--to show the children
    this.terms[index].terms = [{ id: 3 }, { id: 4 }]; //a "easy" way to add
  }

Ok, really the function must be like

addTerms(index: number) {
    let id=this.terms[index].id; //we get the "id"
    //call a httpClient and subscribe
    this.httpClient.get("url/"+id).subscribe(res=>
          //in the subscription
          {
             this.terms[index].show = true; //<--to show the children
             this.terms[index].terms = res
          })
}

NOTE: Can result “strange” add new properties to an Object (in this case “children” and “show”). If we feel more confortable, we can add the properies when we create the object with a null value

1

solved How to append children to object dynamically