I use primeng 9 and angular 9 in my project. I have a p-progressbar inside a ngtemplate with an *ngfor. I think the value is not change or maybe just the component no update the UI. All of the code below is in a p-table.
<ng-template pTemplate="header" *ngFor="let bearing of bearings; index as i; first">
<tr *ngIf='!!bearing'>
<th></th>
<th>{{'TCW.SHARED.SN' | translate}}</th>
<th></th>
<th>
<div class="d-flex justify-content-center align-rowDatas-center">
<span translate="TCW.SHARED.BEARING_NAME" [translateParams]="{value: bearing.setpoint}"
class="text-ellipsis d-inline-block" style="max-width: calc(100% - 19px)"></span>
<span class="fa fa-info-circle position-relative top-minus-1px"
[pTooltip]="bearing | bearingConfig" [escape]="false" tooltipPosition="bottom"></span>
</div>
<div class="position-relative">
<p-progressBar [value]="bearing.progress" [showValue]="false"></p-progressBar>
<div class="remaining-time"
[ngClass]="{'reverse': bearing.progress <= 49}">
<span
class="fa fa-hourglass-half x0-8"></span> <span>{{bearing.remainingS | humanDuration }}</span>
</div>
</div>
</th>
</tr>
</ng-template>
When I refresh the page the progressbar update UI. I have the same code in an other component and that working well.
Thanks for your help.
It is not allowed to use *ngFor
on <ng-template>
because *ngFor produces an <ng-template>
. If I remember correctly, using a structural directive on an <ng-template>
will show as an error in compilation. Try this to solve this issue:
<ng-template pTemplate="header">
<ng-container *ngFor="let bearing of bearings; index as i; first">
...
</ng-container>
</ng-template>
*ngFor
, or any directive starts with *
, are structural directives. They are syntactic sugar for creating an <ng-template>
.