2

PrimeNG Table takes body and header templates to render the table. I have created the component that wraps PrimeNG table. How can I pass ng-template through my component to p-table?

Oleksandr Vetoshkin
  • 309
  • 2
  • 10

2 Answers2

1

The PrimeNG documentation shows this nicely. E.g.

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

Here you can see the body and header templates are marked using the pTemplate Directive.
The p-table will be able to pick them up and use them via ng-container and the structural Directive ngTemplateOutlet.

You can find the source code here.

@ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;
LppEdd
  • 20,274
  • 11
  • 84
  • 139
  • 2
    But the `p-table` will be declared in his custom component, and the `header` and `body` templates will be declared in the parent component. How will he do that? – ConnorsFan Aug 20 '19 at 15:36
1

you can use ng-content to pass html code to your component

consider this code as a custom component

<div> 
 <ng-content> </ng-content>
</div>

and now we use it 

<custom-component>
whatever is written here will be placed where ng content is 
</custom-component>
Khashayar Pakkhesal
  • 416
  • 3
  • 15