Calling angular-datatable ajax call on other api response

Question

I am using angular-datatable ( http://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way ).

Instead on assigning to this.dtOptions in ngOnInit, I want to do it in the response of another api, but the ajax call is not going through.

My code:-

ngOnInit(){
this.firstCall();
}

firstCall(){
  this.api.serviceMethod().subscribe((data : model1) => {
   this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: data.pageLength,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            'api.com/api',
            dataTablesParameters, data.req_body, {}
          ).subscribe(resp => {
            that.persons = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'id' }, { data: 'firstName' }, { data: 'lastName' }]
    };
})
}

When I am putting the dtOptions assignment in ngOnInit, it is getting called, what am I missing here.

Thank you in advance.

Answer 1

You must set a check in super tag (like: tbody or table when you loop in tr tag).
component.html

<table *ngIf="!loading" ...>
  ...

...

component.ts

 loading = true;....subscribe(resp => { that.persons = resp.data; loading = false;