How to use <parent> and <child> component in template recursion in angular

Question

I have 2 components <parent> and <child> . I want to use them in recursive <ng-template>

let say for the sake of simplicity

<parent> component will contain <ul>

<child> component will contain <li>

here is what I have referenced https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

here is how I have tried

<div>
  <ng-template #recursiveList let-list>
    <span *ngFor="let item of list">
     <!--  commented {{item.title}} -->
      <child [item]="item"/>
      <!-- commented <ul *ngIf="item.children.length > 0"> -->
       <template>
            <parent [item]="item"/>
            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
       </template>
      <!-- commented </ul> -->
    </span>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</div>

but above code does not work properly

my expected result should look like below shown, for a parent with 2 childs

<span>
   <parent>
   <child/> // <--  child 1
   <child/> // <-- child 2
</span>

with html it look like below

<span>
   <ul>Parent</ul>
   <li>child 1</li> // <--  child 1
   <li>child 1</li> // <-- child 2
</span>

it must follow same nesting with any level.

please help me with a demo from https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

Answer 1

main.component.html

<div>
  <parent *ngFor="let item of list" [item]="item">
</div>

parent.component.html

<span>{{item.name}}</span>
<ul>
  <child *ngFor="let child of item.children" [item]="child">
</ul>

child.component.html

<li>
  <parent [item]="item">
</li>