Hello all,
I am trying to figure out if it is even possible to nest a component within itself. For instance, a component named entry-children (I have all of this working up to the nesting inside itself point).
entry-children.html:
<ion-list>
<ion-card *ngFor="let child of children">
<ion-card-content>
<p>{{child.content}}</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small light (click)="toggleChildren(child)">
<ion-icon name="text"></ion-icon>
<div>{{child.children.length}} Children</div>
</button>
</ion-col>
</ion-row>
<ng-template [ngIf]="expandChildren == child.child_id">
<entry-children [entry]="child"></entry-children>
</ng-template>
</ion-card>
</ion-list>The toggleChildren click function essentially just passes the child_id to a placeholder expandChildren variable, and the rest of the child element goes into the main input parameter of the new component. Which should in turn trigger the ngIf, and call another iteration of the entry-children component, this time instantiated with the child currently being viewed and so on.
If I replace the text inside of the final <ng-template> with some innocuous string (say "12345") it works perfectly fine. However if I nest the component inside itself, it causes the expanded ng-template to collapse in upon itself. Are components able to be nested inside themselves? Am I doing this improperly, or am I just missing a logic error somewhere?
