CODEWITHSUNDEEP
javascripthtmlangulartypescript
user14922829
user14922829

Reputation:

How to show message on table when data is not available

I have created inline editable table. When data is not available, it should the "No record display. But I am not able to show it. I tried this:

<ng-template #viewable>
  <ng-container *ngIf="data && data.length > 0; else noDataToShow">
    <ng-container *ngFor="let head of headers">
      <ng-container *ngIf="head.mappedProperty">
        <td>
          {{ head.dataType ==='dropDown' ? tableData[head.mappedName]: head.dataType ==='date' ?
          (tableData[head.mappedProperty] | date: 'dd-MM-yyyy') : tableData[head.mappedProperty] }}
        </td>
      </ng-container>
    </ng-container>
  </ng-container>
  <ng-template #noDataToShow> No Data to Show </ng-template>
</ng-template>

Upvotes: 0

Views: 573

Answers (1)

Adriatic
Adriatic

Reputation: 1287

One possible solution using *matNoDataRow:

<tr class="mat-row" *matNoDataRow>
  <td class="mat-cell" colspan="9999">
    No record display.
  </td>
</tr>

Upvotes: 1

Related Questions