0

I have 15 or more mat-tabs under mat-tab-groups but I want to hide tabs on the condition that the "datasource.data.length === 0" The following is not working for me. Any advise?

invt.html

<mat-tab md-selected class="tabView" mat-stretch-tabs="always" ng-hide="dataService.Data.data.length === 0">
    <div class="container">
        <table mat-table [dataSource]="dataService.Data" matSort matSortActive="transactionTime" matSortDirection="desc" class="mat-elevation-z8">
            <ng-container *ngFor="let colName of Colums; let iCol = index" [matColumnDef]="colName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ colName }}</th>
                <td mat-cell *matCellDef="let row; let iRow = index">{{ row[colName] }}</td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="Colums"></tr>
            <tr mat-row *matRowDef="let row; columns: Colums"></tr>
        </table>
    </div>
</mat-tab>
normanius
  • 8,629
  • 7
  • 53
  • 83
da1809
  • 11
  • 1
  • 3

1 Answers1

0

try changing:

ng-hide="dataService.Data.data.length === 0"

to:

*ngIf="dataService.Data.data.length"

Roy
  • 1,189
  • 7
  • 13
  • I tried *ngIf already, which is working. but I want to show all tabs initially and hide if response datasource is empty – da1809 Nov 12 '19 at 19:03