datatable shows "No data available in table"

Question

I have a child component which uses angular datatables. This child table has @Input() stockList: any[].

The problem I am facing is that even the datatable is loaded with data it always displays "No data available in table"

Despite of adding the following code in the child component:

<table id="parentTable" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table row-border hover"
*ngIf="stockList">
<thead>
    <tr>
        <th>ID</th>
        <th>Color</th>
        ......
    </tr>
</thead>
<tbody>
    <tr #rowInstance *ngFor="let item of stockList; let i= index" (click)="toggleRow(i, item.id)">
       <td>{{item.id}}</td>
        <td>{{item.color}}</td>
        ......
    </tr>
</tbody>

ngAfterViewInit() {
  this.dtTrigger.next();
}

It still gives the same issue. Am I missing any extra re-rendering and if yes, in which lifecycle event should I mention it.

Answer 1

I think you should not put a thead/tbody/tr(with ngIf) inside your table element. The dtOptions configuration object contains the column label and the underlying property in JSON to be used for the column value. Try implementing it the way it has been demonstrated here and check if it resolves your issue.

Answer 2

From the description is not clear where is the child and where the parent tables. Could you please provide more code. Parent html template, controller, child html template, child controller.