Angular5 - Passing ng-template parent component to child component

Question

this is original html tag to make Table using primeng. and I think that this header part and body part should be injected from Parent html.

[this is originl p-table code]

<p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable" (onColResize)="onColResize($event)">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.fieldName">
                <span *ngIf="col.type === 'checkbox'">
                    <input type="checkbox" [(ngModel)]="checkAll" (click)="toggleCheckAll()">
                    <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                </span>
                <span *ngIf="col.type === 'text'">
                    {{ col.caption | translate }}
                    <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                </span>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                <span *ngIf="col.type === 'checkbox'">
                    <input type="checkbox" [(ngModel)]="rowData.checkbox">
                </span>
                <span *ngIf="col.type === 'text'">
                    {{ rowData[col.fieldName] }}
                </span>
            </td>
        </tr>
    </ng-template>
</p-table>

[I changed code above to code below]

     <p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable" (onColResize)="onColResize($event)">
         <ng-container>
             <ng-container *ngTemplateOutlet="gridTableHeader"></ng-container>
         </ng-container>
         <ng-container>
             <ng-container *ngTemplateOutlet="gridTableBody"></ng-container>
         </ng-container>
     </p-table>

     <ng-template #gridTableHeader>
         <ng-content select=".grid-table-header"></ng-content>
     </ng-template>
     <ng-template #gridTableBody>
         <ng-content select=".grid-table-body"></ng-content>
     </ng-template>

this is parent html

<grid-table *ngIf="lower" [setting]="lower" [clickedEvent]="event">
    <div class="grid-table-header">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.fieldName">
                    <span *ngIf="col.type === 'checkbox'">
                        <input type="checkbox" [(ngModel)]="checkAll" (click)="toggleCheckAll()">
                        <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                    </span>
                    <span *ngIf="col.type === 'text'">
                        {{ col.caption | translate }}
                        <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                    </span>
                </th>
            </tr>
        </ng-template>
    </div>
    <div class="grid-table-body">
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    <span *ngIf="col.type === 'checkbox'">
                        <input type="checkbox" [(ngModel)]="rowData.checkbox">
                    </span>
                    <span *ngIf="col.type === 'text'">
                        {{ rowData[col.fieldName] }}
                    </span>
                </td>
            </tr>
        </ng-template>
    </div>
</grid-table>

this code have no error but Table data doesn't show in view. But I can recognize table could get data properly because only pagination area show in view.

so I guess it works if ng-template binding run before p-table tag run.

but I don't know how to do it.

Could you give me some advice please?

Answer 1

I don't know if your problem has been resolved or not, but in my case, the pTemplate header, body etc. needed to be inside the p-table component.

Also, you will need to create a context for your body, here is a snippet of my working code:

<p-table class="ui-g-12" [value]="rows" [rows]="pagination.pageSize" [totalRecords]="pagination.totalItems">

      <ng-template pTemplate="header">
        <ng-container *ngTemplateOutlet="columnsTemplate ? columnsTemplate : defaultHeader;"></ng-container>
      </ng-template>

      <ng-template pTemplate="body" let-rowData>
        <ng-container *ngTemplateOutlet="bodyTemplate ? bodyTemplate : defaultBody; context: {$implicit: rowData}"></ng-container>
      </ng-template>
</p-table>

Second file :

<div class="ui-g">
  <ng-template #tableColumns>
    <tr>
      <!-- Columns here -->
    </tr>
  </ng-template>
  <ng-template #tableBody let-company>
    <tr>
     <!-- Your data here -->
    </tr>
  </ng-template>
  <generic-table #table [columnsTemplate]="tableColumns" [bodyTemplate]="tableBody"></generic-table>
</div>

I hope it will help you !