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 ?

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 ?

• javascript
• angular
• angular5
• angular6
• angular2-template

7 Answers 7

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

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

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.

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>

Using pipes for this is unnecessary as a single ngIf and ngElse should solve it or even the double ngIf conditioning with opposite conditions should do.

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>

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

Try this.

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

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