ngIf, index, first, last: Ionic 2

Today lets see how we can track the index number of the loop. i.e., the number of completed iterations in a loop. We shall also learn *ngIf conditional operator and its usage.

Related Read:
Basics of Page Component: Ionic 2

*ngIf Conditional Operator

ngIf is called conditional operator because it operates based on conditions i.e., if the conditional statement it has been assigned is true, then the node it is attached to will be rendered or else it’ll not. *ngIf takes boolean values.

Example: If *ngIf is attached to a div and the condition is false, then the div it has been attached to won’t be added to the DOM. If the condition is true, then div is added to the DOM.

Video Tutorial: ngIf, index, first, last: Ionic 2

index, first, last
While we are looping through some array elements inside template file we can know the index of the loop using index variable. We can use ngIf and do something at the first iteration using first variable and similarly we can know the last iteration using last variable.

Source Code: src/pages/home/home.ts

<ion-list no-lines>
  <ion-item *ngFor="let company of companies; 
                     let i = index; 
                     let lst = last; 
                     let fst = first;">
    {{i+1}}. {{company.name}}  
    <span *ngIf="lst"> - Am last!</span>
    <span *ngIf="fst"> - Am first</span>
  </ion-item>
</ion-list> 

inside *ngFor we have initiated and assigned index value to variable i, last index value to variable lst and first index value to variable fst.

Inside ion-item we are using *ngIf to check if the iteration is first iteration, if so add ‘Am first’ message besides the first list item i.e., beside Microsoft. We also check if the iteration is a last iteration, if so we display ‘Am last!’ message beside the last item in the list i.e., beside IBM.

Output:

1. Microsoft – Am first
2. Apple
3. Google
4. Oracle
5. IBM – Am last!