Datatable not rendered when switch back from another component

What versions you are using?

• node version: 6.11.3
• npm version: 3.10.10
• angular version: 4.2.4
• jquery version: 3.2.1
• datatables version: 1.10.16
• angular-datatables version: 4.2.0
• angular-cli version: 1.4.1

What’s the problem?

Hi, I am using Angular4 with angular-datatable and face the problem. That is when I am at page ‘A’ (PageACompanent) the data table is shown correctly. Then I click the routerLink to navigate to page ‘B’ (PageBComponent), and then click the routerLink to navigate back to page ‘A’ again, but this time the data table is not draw anymore.

Can you share your code?

template.html

<table datatable 
  [dtOptions]="dtOptions" 
  [dtTrigger]="dtTrigger" 
  class="row-border hover">
  <thead>
    <tr>
      <th style="width: 100px; text-align:center;">No.</th>
      <th>Company Name</th>
      <th style="text-align:center; width: 200px;">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let company of companyList; let i = index">
      <th scope="row" style=" text-align:center;">{{ i + 1 }}</th>
      <td>{{ company.companyName }}</td>
      <td style="text-align: center">
        <a role="button" class="btn btn-info btn-sm" routerLink="/companies/edit/{{company.$key}}">
          <i class="fa fa-list align-middle" aria-hidden="true"></i>
        </a>
        <a role="button" class="btn btn-danger btn-sm ml-3" routerLink="/staffs">
          <i class="fa fa-trash-o align-middle" aria-hidden="true"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table>

myfile.ts

ngOnInit() {
    this.companyObserver = this.db.list('/companies-info');
    this.companyObserver.subscribe(companies => {
      this.companyList = companies;
      this.dtTrigger.next();
    });
  }

  public ngOnDestroy(): void {
    this.dtElement.dtInstance.then( (dtInstance: DataTables.Api) => {
      console.log('destroy table');
      dtInstance.destroy();
    });
  }

[kinguy1]

try this:

if (this.dtTrigger.observers) { this.dtTrigger.next();}

for me it work

[awais2080]

yes it did show 😦 believe me this datatable is nightmare to me

On 6 June 2018 at 17:55, Guy Gazit [e-mail] wrote:

@GaryBirges https://github.com/GaryBirges: unsubscribing in ngOnDestry didn’t help. error still shows.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/l-lin/angular-datatables/issues/1109#issuecomment-395058093, or mute the thread https://github.com/notifications/unsubscribe-auth/AllvamRgGeKxH0a7k1OozI9RLlDBM5Lyks5t59EmgaJpZM4Pz0T2 .

– arslan