JAC
JAC

Reputation: 1

How to render ng-template that's inside ng-template when passing down with ngtemplateoutlet

What I'm trying to do is pass a template to a parent component and then pass the context to the child with ngTemplateOutlet but in order to pass the context, the content within the child has to be wrapped inside a ng-template, so it's not rendering, any advice how can I resolve this?

app.component.html

<app-parent
(eventEmit)="onEventEmit($event)"
[customBodyTemplate]="temp"
></app-parent>
<ng-template #temp>
  <app-child></app-child>
</ng-template>

parent.component.html

<p-table [value]="people">
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Last name</th>
      <th>Age</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-people>
    <tr>
      <ng-container
        [ngTemplateOutlet]="customBodyTemplate"
        [ngTemplateOutletContext]="{$implicit: people} "
        [ngTemplateOutletInjector]="injector"
      />  
    </tr>
  </ng-template>
</p-table>

child.component.html

<ng-template #example let-people>
    <td (click)="onClick(people)">{{people.name}}</td>
</ng-template>

Upvotes: 0

Views: 21

Answers (0)

Related Questions