I am using PrimeNG version 9 and I am finding the following problem trying to implement this example: https://primefaces.org/primeng/showcase/#/table/crud
My problem is related to the toolbar implemented by these lines:
<p-toolbar styleClass="p-mb-4">
<ng-template pTemplate="left">
<button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success p-mr-2" (click)="openNew()"></button>
<button pButton pRipple [label]="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
</ng-template>
<ng-template pTemplate="right">
<p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block"></p-fileUpload>
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help"></button>
</ng-template>
</p-toolbar>
The problem is that in my code these buttons are not rendered. It seems that the problem is more related to the two ng-template (left and right) because opening Chrome developer tools I obtain this output:
<p-toolbar _ngcontent-yuc-c193="" styleclass="p-mb-4" ng-reflect-style-class="p-mb-4">
<div role="toolbar" class="p-mb-4 ui-toolbar ui-widget ui-widget-header ui-corner-all ui-helper-clearfix" ng-reflect-ng-class="ui-toolbar ui-widget ui-widget">
<p _ngcontent-yuc-c193="">TEST</p>
<!--bindings={
"ng-reflect-name": "left"
}-->
<!--bindings={
"ng-reflect-name": "right"
}-->
</div>
</p-toolbar>
So as you can see the two ng-template seems not work fine and are not filled with the content. What exactly means this rendered output?
What am I missing? How can I try to fix it?
Import SharedModule in app.module.ts
import { SharedModule } from 'primeng/api';
This solution should work with pTemplate
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With