Search code examples
javascriptangularangular5angular6angular2-template

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 ?

Solution

  • 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>