Display text or table based on ngIf

Question

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.

Answer 1

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>