htmlangularparent-childng-contentngtemplateoutlet

Using ng-content with *ngtemplateOutlet not show in DOM

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!

Solution

  • Thanks to Vovan_Super I solved my issue adding this line of code in childs component

    @ViewChild('child1Template') child1Template: TemplateRef<any>;