Ngx-datatable: conditional footer is not working anymore

[laurent67100]

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

[TidianeChelsea]

Hello.
With this new version, _this.table.headerComponent is undefined._
I also think the problem may be related to Angular 8 with the static ViewChild/ContentChild update.

Any help please ?

[marjan-georgiev]

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

[daresais]

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 :(

[marjan-georgiev]

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.

[daresais]

@marjan-georgiev yeah thought it would be something like that... really appreciating the fast response and efford!

[marjan-georgiev]

@daresais looks like I can't set static: false on the DataTableColumnCellDirective, because it won't render the template at all.

Could you try if this will work please:

1. Copy the whole column and add the conditions to the ngx-datatable-column components
2. Use one ng-template per column with no conditions

example:

       <ngx-datatable-column *ngIf="condition here">
          <ng-template
            let-row="row"
            ngx-datatable-cell-template>
            Template contents here
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column *ngIf="condition here">
          <ng-template
            let-row="row"
            ngx-datatable-cell-template>
            Template contents here
          </ng-template>
        </ngx-datatable-column>

[daresais]

Ok I tried this. The template is working as expected when I use the ng-template without *ngIf condition. When I add the *ngIf condition the template gets ignored.

If it helps I can add a stackblitz example tomorrow morning

[marjan-georgiev]

Right, my thinking was to move the *ngIf above the template, to the ngx-datatable-column component. See the example I posted above.

[daresais]

Ah sorry then I misunderstood what you meant. The *ngIf attempt above is working in general. But I have lots of cells which need different treatments. I would need to loop over the same array of columns multiple times. Isn’t that kind of bad practice? Definitely a workaround tho.

---

Von: Marjan Georgiev [e-mail]
Gesendet: Monday, June 3, 2019 3:45:01 PM
An: swimlane/ngx-datatable
Cc: daresais; Mention
Betreff: Re: [swimlane/ngx-datatable] conditional footer is not working anymore (#1700)

Right, my thinking was to move the *ngIf above the template, to the ngx-datatable-column component. See the example I posted above.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/swimlane/ngx-datatable/issues/1700?email_source=notifications&email_token=ADVDBKUN6VQLULKWAZLGLTDPYUN53A5CNFSM4HR4TZIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWZOGQI#issuecomment-498262849, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ADVDBKXS2ZQ4VMGQSPPZZKLPYUN53ANCNFSM4HR4TZIA.

[TidianeChelsea]

Hello @marjan-georgiev .
Now the headerComponent is defined and it's working perfectly fine as usual.
Thank You so much.

[marjan-georgiev]

Thanks for reporting it!

[wentjun]

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.

[zbubb]

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.

I am having the same issue with the same software versions. As you mentioned, that workaround solves the issue, however requires more complex conditionals to find the base case than if ng-template could handle the conditions. Have you had any more luck on this issue?

[wentjun]

@zbubb Sadly, I am out of luck too. I have to warn you that my workaround is not very efficient if you have many columns, or if you are trying to display many rows. I notice there is quite a bit of latency after implementing my workaround on my own project..

[ReDragon710]

same problem here, angular 8 and ngx 15.0.2 and the ngif on the template is not working

[AlmudenaBarrero]

Still happens with Angular 8.2.
With the ngIf on the template is not working

[sharanainapurapu]

@marjan-georgiev
The work around is working fine, but it adds lot of repeated code when you have lot of columns. Do we have any fix for this?

[akshayborse]

Has this issue been resolved? If yes how?

I am still facing problem after upgrading project from Angular 6 to 8.

And if we are going to use the workaround as mentioned by @wentjun, is there a way to use it for multiple ng-template.

[anthonydagondon]

sad to see that this is not resolved. using ngx-datable version 17.1