PrimeNG Header Template

Question

I'm trying to add a span with a tooltip to a column header using PrimeNG version 4.30.

According to this issue, it should be done using pTemplate decorator in a template element (later deprecated in favor of ng-template). The type="body" templates works just fine, but when I try to use it with type="header" the header is just empty, despite the rows being filled just fine.

<p-column sortable="true">
 <ptemplate pTemplate type="header">
 <label>my field</label>
 <span class="fa fa-question-circle" pTooltip="my tooltip" tooltipPosition="right" tooltipEvent="hover" showDelay="50" hideDelay="200"></span>
 </ptemplate>
 <ng-template let-linha="rowData" pTemplate type="body">
 {{linha.myField}}
 </ng-template>
</p-column>

Changing the order of the templates makes the table fill the rows with the label and span I intended to put on the header, making me suspect it's ignoring not only the type but the first template altogether.

Answer 1

Apparently the type attribute is not the right way to do it, instead you should set the pTemplate directly with the type you want to use. Like this:

<p-column sortable="true">
 <ptemplate pTemplate="header">
 <label>my field</label>
 <span class="fa fa-question-circle" pTooltip="my tooltip" tooltipPosition="right" tooltipEvent="hover" showDelay="50" hideDelay="200"></span>
 </ptemplate>
 <ng-template let-linha="rowData" pTemplate="body">
 {{linha.myField}}
 </ng-template>
</p-column>

This solved the problem.

• Jago: There is no such thing as a <ptemplate> element or PrimeNG component. Both this answer and its question should be deleted as misleading.