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

Please help me thanks in advance !!!