ProgressBar: Templating does not work properly

[friefa]

Describe the bug

The display of the custom labeling (templating) of the ProgressBar does not work as expected.
In the StackBlitz preview from the documentation it works, unfortunately I cannot reproduce this functionality.

Environment

Windows 10, Visual Studio Code, Chrome

Reproducer

No response

Angular version

18.1.0

PrimeNG version

17.18.6

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.16.0

Browser(s)

Chrome, Edge

Steps to reproduce the behavior

1. Create Angular project with ng new pbar-test --no-standalone
2. Choose SCSS and disable pre rendering
3. Install primeng with npm install primeng
4. Add ProgressBarModule to AppModule
5. Copy and paste ProgressBar-Template of prime ng docs:

<div class="card">
     <p-progressBar [value]="50">
         <ng-template pTemplate="content" let-value> 
         <span>{{value}}/100</span>        
         </ng-template>
     </p-progressBar>
</div>

It shows 50% inside the progress bar.

Expected behavior

It is expected that it will say 50/100.

[0x426]

Absolutely right, it's definitely a bug. Small workaround for now:

<p-progressbar value="50" [showValue]="true" unit=" / 100 Bananas" />
or
<p-progressbar value="50" [showValue]="true" [unit]="' / ' + myMaxData + ' Bananas'" />

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,