Data table is showing no data available in table using Angular

Added Time out for solve your problem.

 setTimeout(function () {
  $(function () {
    $('#user-table').DataTable();
  });
}, 3000);

refer this video link I found on youtube https://www.youtube.com/watch?v=78X8ZRU9Hy8

So in my case DataTables are getting activated before I got the response from the server. I just added *ngIf for my table and it worked for me. Like below.

<table *ngIf="dataService.users" datatable="ng" [dtOptions]="dtOptions">

In your user.component.ts, declare your data var empty to initialize it. I don't know why but I had the same problem when I refresh the page. I think the data is lost so you need to initialize it. Maybe datatable needs to know there is an Array and after you fill it it's working.

    ngOnInit(){
        this.data = [];
        this.getUsers();
    }

I WAS WRONG

You have to rerender the datatable because if you rerender the initialisation throw an error, that's why you have the message saying "no data available" despite you have in the table.

UPDATE

In your component, declare this variable:

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

after you pull your data from whatever service you have:

this.officeSrv.getAll().subscribe((data) => {
  console.log('----> office service : get all data', data);
  this.offices = data.offices;

  // ADD THIS
  this.dtTrigger.next();

}, (err) => {
  console.log('-----> err', err);
})

If you have modification to make modification directly in the same datatable without changing the page create and call this function

rerender(): void {
 this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
   // Destroy the table first
   dtInstance.destroy();
   // Call the dtTrigger to rerender again
   this.dtTrigger.next();
 });
}

Use this library in your component:

    import { DataTableDirective } from 'angular-datatables';

In your app module:

    import { DataTablesModule } from 'angular-datatables';

And declare this :

    imports: [
           ...,
           DataTablesModule

And finally for your templating (HTML):

   <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-striped table-bordered" cellspacing="0"
      width="100%">
      <thead>
        <tr>
          <th>Nom</th>
          <th>Adresse</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let office of offices">
          <td>{{office.name}}</td>
          <td>{{office.adress}}</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-block btn-info">Action</button>
              <button type="button" class="btn btn-primary btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropdown</span>
            </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" (click)="update(office._id)">Mettre à jour</a>
                <a class="dropdown-item" (click)="delete(office._id)">Supprimer</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

Hope that's help

src : https://l-lin.github.io/angular-datatables/#/advanced/rerender