let-rowIndex not working in <ngx-datatable-row-detail>

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting

Current behaviour

Using ngx-datatable 11.3.2. I did read and learn from issue #992; the defect is still there.

This a sample snippet which manifests the problem:

                <ngx-datatable-row-detail #detailRow
                                          [rowHeight]="'auto'">
                    <ng-template let-row='row'
                                 let-expanded='expanded'
                                 let-rowIndex='rowIndex'
                                 ngx-datatable-row-detail-template>
                        <div style='padding-left: 35px;'>
                            <div class='nav-tabs-custom'>
                                <ul class='nav nav-tabs'>
                                    <li class='active'><a href='#tab_{{rowIndex}}_1'
                                           data-toggle='tab'
                                           aria-expanded='true'>Diagnostic Output</a></li>
                                    <li class=''><a href='#tab_{{rowIndex}}_2'
                                           data-toggle='tab'
                                           aria-expanded='false'>Error Output</a></li>
                                    <li class=''><a href='#tab_{{rowIndex}}_3'
                                           data-toggle='tab'
                                           aria-expanded='false'>Job Definition</a></li>
                                </ul>
                                <div class='tab-content'>
                                    <div class='tab-pane active'
                                         id='tab_{{rowIndex}}_1'>
                                        <div ace-editor
                                             [text]='row.stdOut'
                                             [mode]="'text'"
                                             [theme]="'idle_fingers'"
                                             [options]='options'
                                             [readOnly]='true'>
                                        </div>
                                    </div>
                                    <div class='tab-pane'
                                         id='tab_{{rowIndex}}_2'>
                                        <div ace-editor
                                             [text]='row.stdError'
                                             [mode]="'text'"
                                             [theme]="'idle_fingers'"
                                             [options]='options'
                                             [readOnly]='true'>
                                        </div>
                                    </div>
                                    <div class='tab-pane'
                                         id='tab_{{rowIndex}}_3'>
                                        <div ace-editor
                                             [text]='row.jobDefJSON'
                                             [mode]="'json'"
                                             [theme]="'idle_fingers'"
                                             [options]='options'
                                             [readOnly]='true'>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ng-template>

All tabs have the same id in each row.

1st row: tab_0_1, tab_0_2, tab_0_3 2nd row: tab_0_1, tab_0_2, tab_0_3 <== should be tab_1_1, tab_1_2, tab_1_3

Expected behaviour

Would like rowIndex to be working.

Reproduction of the problem

Use the above snippet.

Please tell us about your environment:

• Table version: 11.3.2

• Angular version: 5.2.10

• Browser: Chrome 66

• Language: TypeScript 2.8.3

[smasala]

Workaround:

@ViewChild(DatatableComponent)      // import {DatatableComponent} from '@swimlane/ngx-datatable';
private readonly table: DatatableComponent;

public getRowIndex(row: any): number {
    return this.table.bodyComponent.getRowIndex(row);   // row being data object passed into the template
}

<ng-template let-row="row" ngx-datatable-row-detail-template>
    {{ getRowIndex(row) }}
</ng-template>

[cassiodsl]

@smasala thank you for your comment, very helpful! it worked 100%!