Angular *ngFor a deep-dive

Less known variables usage of *ngFor

Photo courtesy: https://malcoded.com/static/047bfa202ead56f5b368ddc443072d86/ba299/angular-ngfor.png

Introduction:

We all know that *ngFor is a structural directive used to render a template for each item in a collection. *ngFor has a few tricks up its sleeve to make it easy to use and provides variables that reduces template code to render the html.

Example collection:

I am going to use the following example collection to show different variables and its usage.

Collection:

public tempCollection = new Array<string>();
constructor() { }
ngOnInit() {
  this.tempCollection.push("Cur Temp: -4°C");      
  this.tempCollection.push("Max Temp: 1°C");  
  this.tempCollection.push("Min Temp: -4°C");  
  this.tempCollection.push("Real Feel: 1°C");
}

Basic template:

<div class="row text-center">
  <div class="col-12 px-4 text-center">
    <div 
        class="mt-1 mb-1 notice notice-secondary shadow bg-light 
               text-dark w-25" 
        *ngFor="let temp of tempCollection">{{temp}}
    </div>
  </div>
</div> 

Rendered template:

Plain *ngFor

Index:

Index is commonly used in *ngFor implementation to keep track of the index in the collection. Here I am attempting to add serial numbers(index numbers) for the collection.

<div class="row text-center">
  <div class="col-12 px-4 text-center">
    <div 
        class="mt-1 mb-1 notice notice-secondary shadow bg-light 
               text-dark w-25" 
        *ngFor="let temp of tempCollection; let i=index">
        {{i + 1 + ") "}}{{temp}}
    </div>
  </div>
</div>

Rendered template:

With index as serial numbers

First and Last:

What if I want to add a specific formatting for only first element in the above list or only the last element. We can use *ngClass directive and the variable first/last exposed by *ngFor to identify the first or last element.

<div class="row text-center">
  <div class="col-12 px-4 text-center">
    <div 
        class="mt-1 mb-1 notice notice-secondary shadow bg-light 
               text-dark w-25" 
          *ngFor="let temp of tempCollection; let i=index; 
                  let first=first; let last=last;"  
          [ngClass]="{ 'text-success': first, 'text-danger': last }"
>
        {{i + 1 + ") "}}{{temp}}
    </div>
  </div>
</div>

Rendered template:

first item has text-success, last item has text-danger class applied to them

Even and Odd:

Let’s say I want to add certain background based on the even or odd index number. We can use *ngclass to render striped html for even/odd items in the collection.

<div class="row text-center">
  <div class="col-12 px-4 text-center">
    <div 
        class="mt-1 mb-1 notice notice-secondary shadow bg-light 
               text-dark w-25" 
          *ngFor="let temp of tempCollection; let i=index; 
                  let even=even; let odd=odd;"
          [ngClass]="{ 'bg-info': even, 'bg-warning': odd }"
>
        {{i + 1 + ") "}}{{temp}}
    </div>
  </div>
</div>

Rendered template:

even items has bg-info and odd items has bg-warning class applied to them.

In conclusion:

NgForOf provides exported values that can be aliased to local variables. The above examples provide simple way to understand the local variables. Have fun using the variables to render different templates!