Tengo 2 componentes <parent> y <child> . Quiero usarlos en <ng-template> recursivo

digamos por el bien de la simplicidad

El componente <parent> contendrá <ul>

El componente <child> contendrá <li>

esto es lo que he mencionado https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

así es como lo he intentado

 <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>

pero el código anterior no funciona correctamente

mi resultado esperado debería verse como se muestra a continuación, para un padre con 2 hijos

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

con html se ve como a continuación

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

debe seguir el mismo anidamiento con cualquier nivel.

ayúdenme con una demostración de https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

Por favor ayúdenme gracias de antemano!!!