Angular2 How can I use ngIf correctly to show some text only when there's no data from server?

Question

I am getting some data from server and using ngFor to show them (It's search feature) but when there's no result, I want to show text saying 'There's no result"

How can I do this?

I tried this so far but this isn't working.

 <div *ngIf="teaInfo != '{}'">

        <div class="starter-template text-xs-center">
            <h5 style = "text-align:center">No result</h5>

        </div>

   </div>

Sandip - Frontend Developer · Accepted Answer · 2017-04-07 11:04:14Z

2

Use ngSwitch to check data exist and show default message if no data available as below:

You can also get below result with help of IF statement but advisable to use Switch instead of If statement for better performance perspective.

<div [ngSwitch]="true">
    <div *ngSwitchCase="teaInfo != null && teaInfo.length>0">
        //Perform operation on data
    </div>
    <div *ngSwitchDefault>
         There's no result                 
     </div>
</div>

edited Apr 7, 2017 at 11:04

answered Apr 7, 2017 at 10:38

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RemyaJ · Accepted Answer · 2017-04-07 10:37:04Z

0

NgFor is used for an array. So just check

*ngIf="teaInfo.length>0"

answered Apr 7, 2017 at 10:37

RemyaJ

5,5264 gold badges25 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular2 How can I use ngIf correctly to show some text only when there's no data from server?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related