p-progressbar doesn't update value in *ngfor Angular

Question

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>
                    &nbsp;<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>&nbsp;<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.

Answer 1

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>.