Angular: how to display a message when there is no data in a list?-CodePudding

I'm new to Angular, and I need help with displaying a message when there is no data to show.

Here's my component.html part:

<app-header [isHidden]="isHiddenProgressBar"></app-header>
<div >
  <button (click)="changeState()" *ngIf="showButton" color="primary" mat-raised-button>Change state</button>
</div>
<div >
  <app-list *ngIf="visible" [changeObjects]="data"></app-list>
</div>

And I have a boolean in the .ts file as follows:

  this.data = this.objects;
      this.visible = this.objects != null && this.objects.length > 0;
      this.showButton = true;
    }

I would like the component to display the list if there's data to show, otherwise I would like to display a message like 'The list is empty.'

Thank you for your help!

CodePudding user response：

You can use ngIf directive to render ng-template when the argument is not truthy. More you can read here.

Example for your code:

<app-list *ngIf="visible; else #notVisible" [changeObjects]="data"></app-list>
<ng-template #notVisible>The list is empty.</ng-template>