unable to add row details in Angular 5?

Question

Hi I am working on Angular 5 Project. I am using ngx data table. I am trying to implement row detail functionality. I added ngx-datatable-row-detail and ngx-datatable-column. To expand row arrow symbol should come but In my case nothing is coming. Below is my code.

<ngx-datatable class="material colored-header sm table-hover"
                   [loadingIndicator]="loadingIndicator"
                   [rows]="rows"
                   [rowHeight]="35"
                   [headerHeight]="35"
                   [footerHeight]="35"
                   [columns]="columns"
                   [limit]="10"
                   [columnMode]="'force'">
    </ngx-datatable>

    <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;">
                <div><strong>Address</strong></div>
                <div>ggg</div>
            </div>
        </ng-template>
    </ngx-datatable-row-detail>

    <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]="!expanded"
               [class.datatable-icon-down]="expanded"
               title="Expand/Collapse Row"
               (click)="toggleExpandRow(row)">
            </a>
        </ng-template>
    </ngx-datatable-column>

Below is my type script code.

 toggleExpandRow(row) {
        console.log('Toggled Expand Row!', row);
        this.table.rowDetail.toggleExpandRow(row);
    }

    onDetailToggle(event) {
        console.log('Detail Toggled', event);
    }

I am following https://swimlane.github.io/ngx-datatable/#row-details.

Can someone help me to figure out it this issue? Thank you

sonal jain sonal jain · Accepted Answer · 2018-07-09T14:35:04

After that try with this code---

<ngx-datatable #myTable
      class="material server-scrolling-table"
      [rows]="rows"
      [columns]="columns"
      [columnMode]="'force'"
      [headerHeight]="headerHeight"
      [rowHeight]="rowHeight"
      [loadingIndicator]="isLoading"
      [selectionType]="'checkbox'"
      [scrollbarV]="true"
      [hidden]="hideTable"
      (scroll)="onScroll($event.offsetY)"
    >
        <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;">
              <div><strong>Address</strong></div>
              <div>{{row.address.city}}</div>
            </div>
          </ng-template>
        </ngx-datatable-row-detail>
        <ngx-datatable-column *ngFor="let col of columns" 
           [name]="col.prop">
        </ngx-datatable-column>
        <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]="!expanded"
               [class.datatable-icon-down]="expanded"
               title="Expand/Collapse Row"
               (click)="toggleExpandRow(row)">Click on this link
            </a>
        </ng-template>
    </ngx-datatable-column>
    </ngx-datatable>

unable to add row details in Angular 5?

2 Answers