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:
<div [hidden]="!job_list.length">
<table>
.
.
.
.
.
</table>
Where should I add the text "No data"? Thank you.
You can check.
<div *ngIf="job_list.length > 0">
// Show table
</div>
<div *ngIf="job_list.length === 0">No Data</div>
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>
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