Ngx-datatable - ng-template progress bar issues

Question

I'm using the following versions:

ngx-datatable: 11.3.2 angular: 5

I'm trying to update ngx-datatable cell template to display a progress bar.

I have below HTML template defined:

<ngx-datatable-column name="Progress" prop="progress_percent" [canAutoResize]="true" [width]="35">
  <ng-template ngx-datatable-cell-template let-value="value" let-row="row">

    <div class="progress">
      <div *ngIf="value < 100" class="progress-bar bg-warning progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>

      <div *ngIf="row.status == 'COMPLETE'" class="progress-bar bg-success progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>

      <div *ngIf="row.status == 'ERROR'" class="progress-bar bg-danger progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>
    </div>
  </ng-template>


</ngx-datatable-column>

However, nothing is displayed on the column.

If I place the div outside ngx-datatable, then it is rendered correctly.

I've also tried to simply use demo example progress bar, but it just shows an empty square:

Inspecting the element, it seems fine but I'm not able to figure out why it is not rendered correctly:

I've also tried using mat-table and the progress bar is rendered fine.

Kindly advise.

Luca Brasi Luca Brasi · Accepted Answer · 2018-05-09T05:56:36

Well, that was a simple one.

In case you're looking at integrating BootStrap progress bar in ngx-datatable, you have to add styling within the div with progress class (width & height properties):

 <ng-template ngx-datatable-cell-template let-value="value" let-row="row">


         <div class="progress" style="width: 140px; height: 15px">


            <div *ngIf="value < 100"
                 class="progress-bar bg-warning progress-bar-striped progress-bar-animated"
                 [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100"
                 [style.width.%]="value">{{value}}%</div>

            <div *ngIf="row.status == 'COMPLETE'"
                 class="progress-bar bg-success progress-bar-striped progress-bar-animated"
                 [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100"
                 [style.width.%]="value">{{value}}%</div>

            <div *ngIf="row.status == 'ERROR'"
                 class="progress-bar bg-danger progress-bar-striped progress-bar-animated"
                 [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100"
                 [style.width.%]="value">{{value}}%</div>
         </div>

        </ng-template>


      </ngx-datatable-column>

Ngx-datatable - ng-template progress bar issues

1 Answers