Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why PrimeNG doesn't show the content of these two ng-template inside a p-toolbar component?

Tags:

primeng

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?

like image 664
AndreaNobili Avatar asked Dec 19 '25 09:12

AndreaNobili


1 Answers

Import SharedModule in app.module.ts

import { SharedModule } from 'primeng/api';

This solution should work with pTemplate

like image 182
Zayan Vizier Avatar answered Dec 24 '25 08:12

Zayan Vizier



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!