CODEWITHSUNDEEP
htmlangulartypescriptfirebase
Khaled Ramadan
Khaled Ramadan

Reputation: 832

Angular, How to show alert if no item(s) is shown?

I'm trying to show a message like "Item dosen't exist", when the item dosen't exist.

Let suppose this is my list:

user 0
user 1
user 2

and the flowing code shows the list above:

<ng-container *ngFor="let user of users | async; let i = index">
  <div *ngIf="!user.deleted">
    {{user.name}} {{i}}
  </div>
</ng-container>

Now let suppose all users has been deleted (user.deleted = true) But the users array still exist and have same length 3.

So how can I show message that there's not any user here?

Note: the list above is a real time list (fireabse)

Thanks.

Upvotes: 1

Views: 447

Answers (2)

J&#246;rg Reichardt
J&#246;rg Reichardt

Reputation: 361

What you do is create a users list (with three entries) and then hide the content. What you should do is filter the users list directly. This can be done in the component code where you fetch the users. Maybe you can even let firebase do the filtering. The after the for loop you can add an *ngIf that tests the list for a length of zero and show a "no entries found" message.

Upvotes: 1

bugs
bugs

Reputation: 15313

You can use this.users.every(user => user.deleted) to check if at least one user has not been deleted.

Based on that condition you can show/hide another div in your html.

Working demo

Upvotes: 1

Related Questions