如何使用 ngTemplateOutlet 实现 Primeng 可重用表

Question

I'm trying to create reusable component which have primeng-table. This reusable component will accept input as data and col to display in table.

In user component, I'm just using prime-table component to display data by passing the data and cols as input.

Now, I want to have custom-users component which will pass <ng-template pTemplate="body" let-rowData let-columns="columns"> to replace the content of table body with transformed data(Any customization like hyperlink for user) in reusable component using ngTemplateOutlet and @ContentChild. So that users components will not be affected. Basically, if we pass ng-template body, that should be used to display table body. Or else it should use default implementation in prime-table component. Can anyone pls help me to achieve this?

Here is the base code setup which is having users component and primetable component -https://github.com/chandru-kumar/primeng-reusable-table-example . Now want to customize the data in custom-users table data by passing the ng-template body.

users.component.html

<app-prime-table
    [data]="data"
    [cols]="cols"
></app-prime-table>

prime-table.component.html

<p-table [columns]="cols" [value]="data" responsiveLayout="scroll">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

prime-table.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-prime-table',
  templateUrl: './prime-table.component.html',
  styleUrls: ['./prime-table.component.scss']
})
export class PrimeTableComponent implements OnInit {

  @Input()
  data: any[] = [];

  @Input()
  cols: any[] = [];

  constructor() { }
  ngOnInit() {
      
  }
}

Answer 1

Implemented with Template as Input to child component.

Full solution is here -https://github.com/chandru-kumar/primeng-reusable-table-example

prime-table.component.html

<ng-template pTemplate="body" let-rowData let-columns="columns">
    <ng-template #defaultTemplate>
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
            
        </tr>
    </ng-template>
        
    <ng-container *ngTemplateOutlet="customBodyTemplate ? customBodyTemplate : defaultTemplate; context: {$implicit: rowData}" ></ng-container>

From Parent component, Implement the custom template to show the table body data like below: custom-users.component.html

<app-prime-table
    [data]="data"
    [columns]="columns"
    [customBodyTemplate] = "customBodyTemplate"
></app-prime-table>

<ng-template #customBodyTemplate let-rowData>
    <tr>
        <td *ngFor="let col of columns">
            <a href="">{{rowData[col.field]}}</a>
        </td>
    </tr>
</ng-template>