I have an data table where I show data of branches, but need to hide the item with the index of 0.

    <ngx-datatable
          class="data-table table-responsive task-list-table"
          [rows]="branches"
          [loadingIndicator]="loadingIndicator"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [limit]="10"
          [rowHeight]="66"
          [reorderable]="reorderable">
          <ngx-datatable-column name="Branch Office Name">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
            branch="row" ngx-datatable-cell-template>
              {{branch['name']}}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Parent Branch">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
             branch="row" ngx-datatable-cell-template>
              {{branch['parentOrganizationName']}}
            </ng-template>
          </ngx-datatable-column>
  </ngx-datatable>

I tried do it with *ngIf directive but it doesn't work. How can I solve this?

I have an data table where I show data of branches, but need to hide the item with the index of 0.

    <ngx-datatable
          class="data-table table-responsive task-list-table"
          [rows]="branches"
          [loadingIndicator]="loadingIndicator"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [limit]="10"
          [rowHeight]="66"
          [reorderable]="reorderable">
          <ngx-datatable-column name="Branch Office Name">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
            branch="row" ngx-datatable-cell-template>
              {{branch['name']}}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Parent Branch">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
             branch="row" ngx-datatable-cell-template>
              {{branch['parentOrganizationName']}}
            </ng-template>
          </ngx-datatable-column>
  </ngx-datatable>

I tried do it with *ngIf directive but it doesn't work. How can I solve this?

• javascript
• angular
• angular5
• ngx-datatable

1 Answer 1

Try wrapping the data to be displayed with a span, then use the ngIf inside the span tag:

<ngx-datatable
          class="data-table table-responsive task-list-table"
          [rows]="branches"
          [loadingIndicator]="loadingIndicator"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [limit]="10"
          [rowHeight]="66"
          [reorderable]="reorderable">
          <ngx-datatable-column name="Branch Office Name">
            <ng-template let-rowIndex="rowIndex" let- 
            branch="row" ngx-datatable-cell-template>
              <span *ngIf="rowIndex != 0">
                {{branch['name']}}
              </span>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Parent Branch">
            <ng-template let-rowIndex="rowIndex" let- 
             branch="row" ngx-datatable-cell-template>
              <span *ngIf="rowIndex != 0">
                {{branch['parentOrganizationName']}}
              </span>
            </ng-template>
          </ngx-datatable-column>
  </ngx-datatable>