Ngx-datatable row detail

Question

I am trying to make the Ngx-datatable detail row work according to the manual but so far with no luck.

I have created this plunker: https://embed.plnkr.co/yQv0Gvy8E8k1bqRr5Pxx/ basically just copying the row detail demo from Swimlanes online documentation http://swimlane.github.io/ngx-datatable/#row-details'

I want to make use of the rowHeight binding as mentioned in the manual:

<ngx-datatable-row-detail [rowHeight]="getHeight" #myDetailRow (toggle)="onDetailToggle($event)">
  <ng-template let-row="row" ngx-datatable-row-detail-template>
    <div><strong>Address</strong></div>
    <div>{{row.address.city}}, {{row.address.state}}</div>
  </ng-template>
</ngx-datatable-row-detail>

and TS:

getHeight(row: any, index: number): number {
  return row.someHeight;
}

However row keeps on being undefined! What am I missing?

As an alternative I wanted to just access my original rows array from the getHeight function but keep getting rows undefined.

console.log(this.rows[index]);

Thanks!

UPDATE - FIX

What I did to fix it was simply:

getHeight(row: any): number {
  if(row) {
    return row.someHeight;
  }
}

Answer 1

when you do this:

[rowHeight]="getHeight"

you are actually binding rowHeight with the function object getHeight.

What you probably want to do is to bind it to the result of the getHeight(...) function instead:

[rowHeight]="getHeight(...)"