ngx-datatable: conditional footer is not working anymore

I’m submitting a …

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior When i add a ngx-datatable-footer in my ngx-datatable, i can see the footer properly displayed. When i make the ngx-datatable-footer conditional with *ngIf, the footer never get displayed even when condition is true. This problem seems related to Angular 8 with the static ViewChild/ContentChild update.

Expected behavior The footer should display.

Reproduction of the problem See stackblitz example With *ngIf="true" it does not display the custom footer. Remove *ngIf="true" to make the custom footer appear.

What is the motivation / use case for changing the behavior? I want to display the footer when a condition is matched

Please tell us about your environment: Win10, Angular8

Table version: 15.0.0
Angular version: 8.0.0
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] all
Language: [all | TypeScript X.X | ES6/7 | ES5] all

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 19 (5 by maintainers)

Most upvoted comments

released 15.0.1

@daresais I am looking at that now. The issue is with the new static property that we had to add to all ContentChild and ViewChild directives.

marjan-georgiev on Jun 3, 2019

Hi there, I understand that this issue is closed, but I seem to be facing another issue that is related to this issue after updating ngx-datatable to version 15.0.2. If I do something like this, the custom stylings/pipes applied within ng-template will not be applied.

<ngx-datatable class="bootstrap" [rows]="list" [columns]="columns">
  <ngx-datatable-column *ngFor="let column of columns; let i = index;" name="{{column.name}}" prop="{{column.prop}}">
    <ng-template let-value="value" *ngIf="column.prop==='buyOrSell'||column.prop==='tradeType'" ngx-datatable-cell-template>
      {{ value | titlecase }}
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

My workaround to solve the above issue would be the following:

<ng-template let-value="value" ngx-datatable-cell-template>
  <span  *ngIf="column.prop==='buyOrSell'||column.prop==='tradeType'">
    {{ value | titlecase }}
  </span>
</ng-template>

I am currently using Angular version 8.0.1, and my ngx-datatable is of version 15.0.2.

wentjun on Jun 19, 2019

Thanks for reporting it!

marjan-georgiev on Jun 4, 2019

I have a similar issue after upgrading to angular 8, but with conditional table cell templates. <ng-template ngx-datatable-cell-template *ngIf="column.template === 'DATE'" let-value="value"> {{value | date: 'LLL'}} </ng-template>

code like this is not working anymore, but it definitely worked before. All ng-templates with a *ngIf condition are getting ignored…

@marjan-georgiev I checked out your branch but it is still not working unfortunately 😦

daresais on Jun 3, 2019

Created a PR that should address both of these issues: https://github.com/swimlane/ngx-datatable/pull/1701

Would appreciate someone giving it a try

marjan-georgiev on Jun 3, 2019