Angular Datatables do not reload with dtTrigger

[julian-dimitroff]

I'm using Angular Datatables in one of my projects. I display data, and on a button click I have to reload the data. I have the following setup:

In .html

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-responsive"
    style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Group</th>
            <th>Weight</th>
            <th>Control Valves</th>
            <th>Zones</th>
            <th>Decks</th>
            <th></th>
        </tr>
    </thead>
    <tbody *ngIf="roomsList?.length != 0">
        <ng-container *ngFor="let room of roomsList; let id = index">
            <tr *ngIf="room.visibility">

                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
                <td>
                    <!- Some code -->
                </td>
            </tr>
        </ng-container>

    </tbody>
    <tbody *ngIf="roomsList?.length == 0">
        <tr>
            <td colspan="3" class="no-data-available">Loading...</td>
        </tr>
    </tbody>
</table>

in the .ts file I have:

dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();

async ngOnInit() {

  this.dtOptions = {

    columnDefs:[
      {
        targets: 0,
        width: "20%"
      }
    ],
    ordering: false,
    paging: true,
    responsive:true,
    searching: false,

  };

  this.roomsList =  await //some api call to get data;
  this.dtTrigger.next();
}

async onSave(event){

  this.roomsList = await //some api call to get data;
  this.dtTrigger.next();
  console.log(this.roomsList);
  console.log(request);
}

-->

I followed this example with a little tweak When I do it with this.dtTrigger.next();, I get the following error:

When I comment the this.dtTrigger.next(); I do not get the error, but I think what is happening, the old data is still there and the new data is rendered, and the pagination goes off and all 500+ rows appear in the table.

I've read that this dtTrigger.next() function, manually re renders the table, but in my case it gives me an error.

Can someone advice, what I might do wrong?

If additional information is needed, I can provide!

:globe_with_meridians: My Environment

• NodeJS version: 14.3.0
• Angular version: 8.0.3
• Angular CLI version: 8.3.29
• jQuery version: ^3.4.1
• DataTables version: ^1.10.20
• angular-datatables version: ^9.0.1

Thanks in advance, Julian

[adrien-syrotnik]

Hello, have you tried this ? https://l-lin.github.io/angular-datatables/#/advanced/rerender You have to destroy the current instance.

Sincerely, Adrien.

[julian-dimitroff]

Hello @adrien-syrotnik , Yes with the code in your provided link it worked perfectly. Thank you!

Regards, Julian