CODEWITHSUNDEEP
javascriptangularangular5angular6angular2-template
firasKoubaa
firasKoubaa

Reputation: 6867

Angular : ngFor data items and display custom message if empty

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 ?

Upvotes: 3

Views: 9964

Answers (7)

MaxZoom
MaxZoom

Reputation: 7753

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>

Upvotes: 0

WAQAS AHMAD
WAQAS AHMAD

Reputation: 21

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

Try this.

Upvotes: 0

Martin Parenteau
Martin Parenteau

Reputation: 73731

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.

Upvotes: 6

ffcc
ffcc

Reputation: 70

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>

Upvotes: 0

Terrorbladezz
Terrorbladezz

Reputation: 91

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.

Upvotes: 0

Mohit
Mohit

Reputation: 1295

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>

Upvotes: 2

topalkata
topalkata

Reputation: 2098

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>

Upvotes: 10

Related Questions