Show a placeholder message if the array does not contain any elements

Question

Show a placeholder message if the array does not contain any elements

Here's the html code snippet I am working with

 <empty-list [hidden]="!emptylist" text="There is currently No User"</empty-list>
  <div *ngFor="let userObser of userObservables">
    <ion-item #emptylist *ngIf="userObser | async as user">   
        <h2>{{user.displayName}}</h2>
        <h3>{{user.email}}</h3>
    </ion-item>
  </div>

I aim to display the empty list only when there are no users and hide it if at least one user exists.

While I can achieve this using a subscribe method, I prefer utilizing the async pipe to avoid the need for manual unsubscription each time. This seems inefficient to me.

Is it possible to create a local variable within the ion-item element that could be referenced outside to control visibility based on its existence? I have tried implementing this idea but haven't had any success yet.

javascript angular typescript rxjs observable

Answer 1

Answer №1

In order to display an alternative template when a condition is not met, you can incorporate a simple else statement within the ngIf block:

<ng-container *ngIf="userObservables.length > 0; else emptyList">
  <ng-container *ngFor="let user of userObservables">
    <ion-item *ngIf="user | async as user">…</ion-item>
  </ng-container>
</ng-container>

<ng-template #emptyList>
  <empty-list>…</empty-list>
</ng-template>

It's worth mentioning that I have made use of a ng-container instead of a div element to prevent unnecessary DOM nodes from being created.

On a related note regarding your own proposal: keep in mind that template references are only accessible within the template boundary. Structural directives such as *ngIf and *ngFor establish their own templates, thus establishing a boundary. This is why

<h2>{{ ref.innerText }}</h2>
<ng-container>
  <span #ref>Hello, World</span>
</ng-container>

will function correctly, while

<h2>{{ ref.innerText }}</h2>
<ng-container *ngIf="true">
  <span #ref>Hello, World</span>
</ng-container>

will not produce the desired outcome.

Answer 2

In order to display an alternative template when a condition is not met, you can incorporate a simple else statement within the ngIf block:

<ng-container *ngIf="userObservables.length > 0; else emptyList">
  <ng-container *ngFor="let user of userObservables">
    <ion-item *ngIf="user | async as user">…</ion-item>
  </ng-container>
</ng-container>

<ng-template #emptyList>
  <empty-list>…</empty-list>
</ng-template>

It's worth mentioning that I have made use of a ng-container instead of a div element to prevent unnecessary DOM nodes from being created.

On a related note regarding your own proposal: keep in mind that template references are only accessible within the template boundary. Structural directives such as *ngIf and *ngFor establish their own templates, thus establishing a boundary. This is why

<h2>{{ ref.innerText }}</h2>
<ng-container>
  <span #ref>Hello, World</span>
</ng-container>

will function correctly, while

<h2>{{ ref.innerText }}</h2>
<ng-container *ngIf="true">
  <span #ref>Hello, World</span>
</ng-container>

will not produce the desired outcome.

Show a placeholder message if the array does not contain any elements

Answer №1

Similar questions

Choosing a table cell in a React Bootstrap table

What is the best way to include the title "addmoves" to the server using AngularJS?

Is there a way to access a header value using nodejs and express?

Wait for the response from a post request in Angular and retrieve the value once it becomes accessible

Is the video failing due to excessive adjustments of the video's currentTime?

Tips for creating a more seamless box transition within HTML

Modifying the geometry of a three.js object

The Element UI feature ensures that duplicate entries are not added to the table through the use of

The Javascript code for sleep execution is operational, yet it appears to be not inducing any noticeable delays

how to use jQuery to locate the immediately preceding node that meets specific criteria

Basic animation created using Three.js

The issue with Three JS is that concentrating on the avatar's perspective while it moves is not functioning properly

transforming AJAX JSON responses into arrays

Tips for successfully retrieving a span value in VUE

Having trouble with Http.post in Angular4 cli when 'application/json' is set in the header

Error encountered when attempting to run an Angular 2 application with 'ng serve' command

Is it Possible for Angular Layout Components to Render Content Correctly even with Deeply Nested ng-container Elements?

Iterating through HTML table data using a JQuery for each loop

In Vue.js, you can utilize one property to access additional properties within the same element

Issues with the functionality of the accordion feature when implemented with object-oriented JavaScript