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!!!
principal.componente.html
<div> <parent *ngFor="let item of list" [item]="item"> </div>
padre.componente.html
<span>{{item.name}}</span> <ul> <child *ngFor="let child of item.children" [item]="child"> </ul>
niño.componente.html
<li> <parent [item]="item"> </li>