Ionic else if with angular

Ionic else if with angular

When we get data to your pages regardless that those data coming from API source or internal storage it's always good idea to have replacement method in case that there is no data to serve.

Imagine that you want show some categorized articles and some of this categories havn't have any article yet, in that case you might want to show some error and let users know that this specific category doesn't have any articles yet.

Today I teach you how to take advantage of angular in Ionic 4 app and do such thing.

 

Note: this article focuses on front side and not module part.

 

Step 1 loop your data in view


  
    
       // card content
    
  

We are looping our data items

*ngFor="let post of items | slice:0:limit"

We also added angular if statement in our code

*ngIf="items else noItem"

Please note to else noItem part, we use this in next step.

Step 2 Add else part

In this step we take advantage of angular template system and will use ng-template


    
      
        
          
            You don't have any saved article try to add some and back again.
          
        
      

    

In step one I mentioned that we used else noItem and in this step we use that noItem as tag #noItem in order to show different details if our items array was empty.

 

Now go ahead and test it out.

 

Full Code


  
    
       // card content
    
  


    
      
        
          
            You don't have any saved article try to add some and back again.
          
        
      

    

 

 

 

 

Leave a comment

Enjoy this?

Subscribe our newsletter and get latest updates straight to your inbox.