Angular : ngFor data items and display custom message if empty

Question

I am looping my data list and displaying in the view , as spans tags :

<span  *ngFor="let d of myData; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>

As you can see , I am adding a comma '**, betewen items values

this looks like this ::

AAA,BBB,CCC,DDD,

But it happens that my data would be empty : so i want to display some custom string instead : "NO ITEMS"

i wante to handle that in the html part , with pipes

Suggestions ?

Answer 1

You can wrap the list in another container and display it only if the data array is not empty, else - display another custom content, eg:

<div>
    <div *ngIf="myData.length">...// existing list of spans</div>
    <div *ngIf="!myData.length">NO DATA</div>
</div>

Answer 2

You can use the ngIf ... else construct to display an alternative template when the array contains no data. To avoid adding an HTML container around the outer span element, wrap it inside an ng-container (which is not rendered in the HTML output):

<ng-container *ngIf="myData.length > 0; else noItems">
  <span *ngFor="let d of myData; last as isLast">
    {{d.name}} 
    <span *ngIf="!isLast">,</span>
  </span>
</ng-container>
<ng-template #noItems>
  NO ITEMS!!!
</ng-template>

See this stackblitz for a demo.

Answer 3

Solution using pipes

The idea is to add another element to myData if it is empty else leave it untouched like this:

Create a new file data.pipe.ts add the following content in it:

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
    pure: false, // We need to update if it change, you are free to remove if you don't want this behaviour
    name: 'appData'
})
export class DataPipe implements PipeTransform {
    transform(data: any) { // Here data should be an array.
        if (data.length === 0) {
            return ['NO DATA'];
        } else {
            return data;
        }
    }
}

Now in your AppModule or in any module(in which you want to add it) in the declaration array add the DataPipe (Don't forget to add the import) and now in your template file:

<span  *ngFor="let d of myData | appData; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>

Answer 4

为此使用管道是不必要的，因为单个 ngIf 和 ngElse 应该可以解决它，甚至可以使用具有相反条件的双 ngIf 条件来解决。

Answer 5

You can create your own pipe that evaluates the list and responds to one by default in case the original list is empty. For example:

Define the pipe as follows:

@Pipe({name: 'empty'})
export class EmptyPipe implements PipeTransform {
  transform(value: any[], emptyText: string = 'NO ITEMS'): any {
    return value && value.length > 0? value : [{name: emptyText}];
  }
}

Add the pipe to the declaration of your module:

NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, EmptyPipe ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

And finally use the pipe in the *ngFor as follows:

<span  *ngFor="let d of myData | empty; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>

Answer 6

Just in case someone needs it, I did it without the wrapper container

<span *ngFor="let d of myData || []">{{ d.name }}</span>  
<span *ngIf="!myData.length">NO ITEMS</span>

Answer 7

<span  *ngFor="let d of myData | appData;"> 
    {{d.name}} 
    <span *ngIf="(myData | appData).length==0">
        Your custom message
    </span>
</span>

Try this.