-1

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!

Edo2610
  • 184
  • 1
  • 9
  • 1
    ...well, what do You expect with such lines `*ngTemplateOutlet="wrapper_child1.child1Template"` - the `child1Template` to be visible property of `child1.component` .. it's not ... You could reference temple (by using tmpl var in the same (component ) template : https://github.com/ngx-dummy/accordion-simple/blob/master/projects/accordion-sample/src/app/app.component.html#L40 or pass the template as input to "consuming" component: https://github.com/ngx-dummy/accordion-simple/blob/master/projects/%40ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L98 – Vovan_Super Oct 20 '21 at 07:50
  • Sorry, I note that the snippet code is not an exact example...I provide it on stackblitz. Anyway thanks for comment, I'll check your links – Edo2610 Oct 20 '21 at 07:56
  • Anyway I use `*ngTemplateOutlet="wrapper_child1.child1Template"` starting from this article : https://blog.josematos.work/how-to-render-an-angular-component-without-any-wrapping-tag-5084c84e0a62 – Edo2610 Oct 20 '21 at 08:17

1 Answers1

0

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

@ViewChild('child1Template') child1Template: TemplateRef<any>;
Edo2610
  • 184
  • 1
  • 9