I have three Angular component, one base component and two child component (child1 and child2), with these structure:
child1.component.html
<ng-template #child1Template>
<div>
<h1>CHILD 1</h1>
</div>
</ng-template>
child2.component.html
<ng-template #child2Template>
<div>
<h1>CHILD 2</h1>
</div>
</ng-template>
base.component.html
<app-child1 #wrapper_child1 class="hidden"></app-child1>
<app-child2 #wrapper_child2 class="hidden"></app-child2>
<div class="baseContainer">
<ng-content *ngTemplateOutlet="wrapper_child1.child1Template"></ng-content>
<ng-content *ngTemplateOutlet="wrapper_child2.child1Template"></ng-content>
</div>
When I inspect the DOM, it shows child1 correctly but child2 not appears and there is that
<!--bindings={
"ng-reflect-ng-template-outlet": "[object Object]"
}-->
Anyone has some explenation?
Please note that my structure absolutely needs this structure because I need to insert the content of childs in the base component WITHOUT adding additional html tags.
Thanks!
Thanks to Vovan_Super I solved my issue adding this line of code in childs component
@ViewChild('child1Template') child1Template: TemplateRef<any>;