Angular Datatables with *ngIf shows error

Question

I am using Angular Datatables to show some tabular data. I have added an *ngIf condition to the table, so that it will not be visible until the data is loaded completely. The table code looks like the following :

<table class="table" id="releaseDatatable" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" *ngIf="!loading">

The loading variable I am setting from my component and then calling this.dtTrigger.next(). I have the following code to set loading.

set loading(loading: boolean) {
        this._loading = loading;
       setTimeout(()=>{
            this.dtTrigger.next();
       }, 100);
    }

Now for the first time, everything is working fine. But when I try to re-load the table (after edit or delete), it it is showing the following error :

ERROR ObjectUnsubscribedErrorImpl {message: "object unsubscribed", name: "ObjectUnsubscribedError"}

and this.dtTrigger has null as observers. How this can be fixed ? I tried to re-render the table, but it is also not working.

Cagri Tacyildiz · Accepted Answer · 2020-07-17 07:43:11Z

4

You can use [ngClass] and hide rather than using ngIf

<table class="table" id="releaseDatatable" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" [ngClass]="loading">

in component make loading attribute as "hide" or "show";

in css hide it

.hide{
   display:none;
}

For render again I use destroy and and trigger next

import

  import { DataTableDirective } from 'angular-datatables';

  @ViewChild(DataTableDirective, {static: false})  
   datatableElement: DataTableDirective;

to render

rerender(){
        this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
            dtInstance.destroy();
            this.dtTrigger.next();
        });       
    }

call this rerender method

set loading(loading: boolean) {
       setTimeout(()=>{
            this.rerender();
       }, 100);
    }

edited Jul 17, 2020 at 7:43

answered Jul 17, 2020 at 5:49

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Happy Coder Over a year ago

I think the issue is that ngIf removes the table from DOM and so for the second time, It is not able trigger the table reload. But no idea how to fix it.

Cagri Tacyildiz Over a year ago

@HappyCoder yes you are right. You can use class rather than ngIf as a way . I update answer with this approach

Happy Coder Over a year ago

That also will not work. It is showing

DataTables warning: table id=releaseDatatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Cagri Tacyildiz Over a year ago

This is rerender problem . I updated answer to rerender table . I firstly destroy then I trigger next @HappyCoder

Happy Coder Over a year ago

Unfortunately, it is also not working It shows Cannot read property 'then' of undefined

|

Drenai · Accepted Answer · 2020-07-17 06:14:22Z

2

This is a known problem with how Angular Datatables re-renders

You can find more details and workarounds from the GitHub issues list e.g. https://github.com/l-lin/angular-datatables/issues/1241

Some of the comments suggest using [hidden] instead of *ngIf

edited Jul 17, 2020 at 6:14

answered Jul 17, 2020 at 6:05

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

2 Comments

Happy Coder Over a year ago

Any workaround ? I tried to use the hidden mentioned there, but it is showing error

DataTables warning: table id=releaseDatatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Happy Coder Over a year ago

Yes. But don't have any idea how to fix this.

Miqdad Ali · Accepted Answer · 2020-07-17 06:21:45Z

0

It's better to add a wrapper div for your table like <div *ngIf="!loading"><table></table></div>

Angular v2 doesn't support more than one structural directive on the same element.

answered Jul 17, 2020 at 6:21

Miqdad Ali

6,1577 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angular Datatables with *ngIf shows error

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related