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

Question

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 class="change">
  <button (click)="changeState()" *ngIf="showButton" color="primary" mat-raised-button>Change state</button>
</div>
<div class="list">
  <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!

Adrian Kokot · Accepted Answer · 2021-10-28 06:02:43Z

1

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>

answered Oct 28, 2021 at 6:02

Adrian Kokot

3,6152 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WorkWork Over a year ago

Great, thank you! One more question: is there a way to change the position of the message, like in the middle of the screen? Currently, it's in the top left corner.

Adrian Kokot Over a year ago

You can put the ng-template anywhere in the component template.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related