Datatable pagination, search and sorting is not loading properly using angular 9

Question

I have array data fetching from service file, here my issue is in my data table data is binding properly but the pagination, search and sorting is loading in the Dom. I have commented my html, component and service file please look into it

.html

<table class="table table-striped" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
    <thead>
      <tr>
        <th>UNIQUE_ID</th>
        <th>ORGANISATION</th>
        <th>CREATED</th>
        <th>MODIFIED</th>
        <th>ACTION</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let organisation of organisationsList">
        <td>{{organisation.OrganisationUid}}</td>
        <td>{{organisation.OrganisationName}}</td>
        <td>{{organisation.CreatedOn | date: 'dd-MMM-yyyy hh:mm:ss a'}}</td>
        <td>{{organisation.ModifiedOn | date: 'dd-MMM-yyyy hh:mm:ss a'}}</td>
        <td>
          <button class="btn btn-primary" (click)="goToViewOrganisation(organisation.Id)"><i class="icon-eye"></i></button>
        </td>
      </tr>
    </tbody>
  </table>

component.ts

  ngOnInit(): void {
    this.dtOptions = {
     pagingType: 'full_numbers',
     order: [2, 'desc'],
     columnDefs: [{
     targets: [4],
     orderable: false,
    }, {
     targets: [2, 3],
     type: 'date'
    }]
   };
   this.loadOrganisationsList();
  }

   loadOrganisationsList() {
    this.orgService.getOrganisationsList().subscribe((res) => {
    this.organisationsList = res['Data']['Organisations'];
    this.dtTrigger.next();
    }, (err) => {
     if (err.status !== 403) {
     ));
   }
  });
}

service.ts

getOrganisationsList() {
const organisation = JSON.parse(localStorage.getItem('organisation'));
if (organisation !== undefined && organisation !== null) {
  return of(organisation);
} else {
  const API_URL = `${this.env.apiUrl}/Organisations`;
  return this.httpClient.get(API_URL).map((data: any) => {
    localStorage.setItem('organisation', JSON.stringify(data));
    return data;
  }).catch((error: any) => {
    return Observable.throw(error);
  });
 }
}

enter image description here

Answer 1

Added timeout for dtTrigger.next() like below in the code:

loadOrganisationsList() {
this.orgService.getOrganisationsList().subscribe((res) => {
  this.organisationsList = res['Data']['Organisations'];
  setTimeout(function() {
    this.dtTrigger.next();
     }.bind(this));
   }, (err) => {
  if (err.status !== 403) {
  }
 });
}