PrimeNG turbo table template error when sorting

I'm trying to inject a header template in the turbo table element by using ngTemplateOutlet as it can be seen in the following code snippet :

<p-table [value]="cars1">
<ng-template pTemplate="header">
<ng-container *ngTemplateOutlet="defaultHeader"></ng-container>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr>
<td *ngFor="let col of cols">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>


And the before mentioned header template with sorting can be seen here :

<ng-template #defaultHeader>
<tr>
<th *ngFor="let col of cols" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>


After the page loads, the following error gets thrown:

Error: StaticInjectorError(AppModule)[ScrollableView -> Table]:
StaticInjectorError(Platform: core)[ScrollableView -> Table]:
NullInjectorError: No provider for Table

Converting circular structure to JSON


Here is a working StackBlitz example

Since using the template header within an ngTemplateOutlet is a requirement for my use case, I would kindly ask to point out what am I doing wrong here ?

Thank you !

Continue reading...