ngx-datatable detail row with API data not working

Question

I am attempting to create a ngx-datatable that I can use for showing details on row toggle.

Most everything works but I cannot figure out why I am not able to show data that comes form another api for particular row click.

I have refereed this example for this use case,

https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts

That is working like a charm, now i don't get any documentation for passing the API data instead of row data in this method,

 toggleExpandRow(row) {
     //HERE IS MY API CALL.
     console.log('Toggled Expand Row!', row);
     //I TRIED PASSING CUSTOM API DATA INSTEAD OF ROW HERE 
     this.table.rowDetail.toggleExpandRow(row);
}

I can get data resultset from api into console, but it's not expanding into html template.

Here is my HTML template,

 <!-- Row Detail Template -->
    <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div style="padding-left:35px;">
         //I WANT TO SHOW API DATA HERE
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    <!-- Column Templates -->
     <ngx-datatable-column
      [width]="50"
      [resizeable]="false"
      [sortable]="false"
      [draggable]="false"
      [canAutoResize]="false">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
        <a
          href="javascript:void(0)"
          [class.datatable-icon-right]="!row.$$expanded"
          [class.datatable-icon-down]="row.$$expanded"
          title="Expand/Collapse Row"
          (click)="toggleExpandRow(row)">
        </a>
      </ng-template>
    </ngx-datatable-column>

Please help me out. I am using angular 4.3.4 and ngx-datatable 9.3.0

Sachin Jagtap Sachin Jagtap · Accepted Answer · 2019-03-25T18:17:13

Although the question is very old, but still the solution will help those who may encounter it in future. First of all we have to pass one of the row of rows to toggleExpandRow(row). You can solve this by passing row to toggleExpandRow(row), but using another variable to show data in ngx-datatable-row-detail. I have added a stackblitz to show how I have implemented it. Link: https://stackblitz.com/edit/angular-nomjk3

ngx-datatable detail row with API data not working

1 Answers