Tuesday, 2 April 2019

Angular 6 - Child doesn't render template passed by parent

Well, this is my parent component where I am trying to pass the template nodeTemplate to the child ils-tree

<div class="nodes-panel">
    <ils-tree layout="horizontal" [json]="nodes" [template]="nodeTemplate">
    </ils-tree>
</div>

<ng-template #nodeTemplate>
    <ng-template let-node  pTemplate="default">
        <p class="node-type"></p>
        <p class="node-name"></p>
    </ng-template>
    <ng-template let-node  pTemplate="orgNode">
        <p class="org-node-name"></p>
    </ng-template>
</ng-template>

The child component ils-tree's HTML looks this way

<p-tree
  [value]="nodes"
  [layout]="layout"
  selectionMode="single"
  [(selection)]="selectedNode"
  [loading]="loading"
>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</p-tree>

and the controller file has

@Input()
template: TemplateRef<any>;

Basically, the ps are nowhere to be seen and yes, the data json is being passed successfully. Help!

P.S The template when embedded directly, in between, works. That is,

<p-tree
  [value]="nodes"
  [layout]="layout"
  selectionMode="single"
  [(selection)]="selectedNode"
  [loading]="loading"
>
  <ng-template let-node  pTemplate="default">
        <p class="node-type"></p>
        <p class="node-name"></p>
    </ng-template>
    <ng-template let-node  pTemplate="orgNode">
        <p class="org-node-name"></p>
    </ng-template>
</p-tree>

Thanks.



from Angular 6 - Child doesn't render template passed by parent

No comments:

Post a Comment