Display text or table based on ngif-CodePudding

I have a table that is populated based on API call response(job_list). If no data is returned, I want to display a text saying "No data". I have done the following:

HTML

<div [hidden]="!job_list.length">
<table>
.
.
.
.
.
</table>

Where should I add the text "No data"? Thank you.

CodePudding user response：

You can do this via a separate template, all it just requires is one *ngIf, with an else included. Read more about ngIf in the official docs.

<ng-container *ngIf="job_list.length; else noDataTemplate">
    <table>

    </table>
</ng-container>


<ng-template #noDataTemplate>
    <p>No data found</p>
</ng-template>

CodePudding user response：

You can check.

 <div *ngIf="job_list.length > 0">
   // Show table
 </div>
 <div *ngIf="job_list.length === 0">No Data</div>

CodePudding user response：

You can use [ngSwitch] to achieve this. More info in Angular Doc

<ng-container [ngSwitch]="job_list.length">
   <ng-container *ngSwitchCase="0">
      <p>No Data</p>
   </ng-container>

   <ng-container *ngSwitchDefault>
      <table>
    
      </table>
   </ng-container>
</ng-container>

Try it yourself on this Stackblitz