Angular ngFor Directive in Angular 13

Angular ngFor directive, we can control the display of blocks of elements within DOM. Angular has a lot of built-in directives: ngIf, ngFor, ngSwitch, ngClass, and ngStyle .

The first three directives are so-called structural directives, which are responsible for changing the layout of the HTML by adding, removing, or modifying elements from the DOM. Structural directives start with an asterisk ( * ).

The last two directives manipulate the appearance of the DOM elements they are called attribute directives and start with [] square bracket.

In the tutorial, we’ll learn how to use the *ngFor directive and demonstrate how to use the index and other different local variables used within ngFor directive.

What is Angular ngFor directive

While working with an array or list, we need to iterate through each item of an array in the component template. In Angular, we can iterate over a list of objects in our template using the *ngFor directive.

The *ngFor directive is used for creating multiple elements, usually one for each instance of a collection of objects. The syntax of ngFor directive.

<some-element *ngFor="let item of ArrayObject">
 ...content of individual item
</some-element>

How *ngFor directive works?

To do this, we will use *ngFor directive, which will
• iterate over a list of items and
• generate a new tag for each one.

Angular ngFor example basic

Let first demonstrate simple ngFor directive, here we have two examples of ngFor directive. First, it iterates through the list of countries, and second, we can iterate a definite number by specifying the item array directly in the component template.

<section>
  <h4>Angular *ngFor directive example 1</h4>
  <div *ngFor="let country of ['India','France','Japan']">
   {{ country }}
  </div>
</section>

<section>
  <h4>Iterate edupala.com three times</h4>
  <div *ngFor="let site of [1,2,3]">
    Site name: edupala.com
  </div>
</section>

We can give any name to *ngFor individual local item names, we had given country and site name in our example.

Angular ngFor index example

Angular ngFor directive comes with lots of local variables, index is one of them. Let’s demonstrate an example of Angular ngFor index example. Let’s first define frameworks as an array object containing a list of frameworks in component typescript.

  frameworks: string[] = ['Angular', 'Reactjs', 'Vue'];

<section>
  <h4>Angular NgFor index example</h4>
  <div *ngFor="let framework of frameworks; index as i">
    {{ i+1 }} - {{ framework }}
  </div>
</section>

We can also use ngFor directive with Angular select option input.

<h4>Select option</h4>
<select [(ngModel)]="selected" name="valueCheck" (change)="valueChange($event)">
    <option *ngFor="let framework of frameworks" [value]="framework" [selected]="framework == selected">
      {{ framework }}
    </option>
  </select>

  <h3>{{ selected }} </h3>

Angular ngFor directive with method

In all the above examples we have used ngFor directive with array object directly, we can also use ngFor with the method, a method that returns an array object.

<h4>NgFor using method</h4>
<div *ngFor="let item of getFrameworks(); let i = index">
    {{ i+1 }} - {{ item }}
</div>

//Where getFrameworks() return
 frameworks: string[] = ['Angular', 'Reactjs', 'Vue'];
  getFrameworks(): string[] {
    return this.frameworks;
  }

Angular ngFor local variable even and odd example

We have learned that *ngFor directive has an index as a local variable, it also has many local variables like even and odd element indexes. In this example, we will style different for even and odd element indexes. Here is a screenshot of our example.

<section>
 <h4>NgFor with even and odd local variables </h4>
 <div *ngFor="let number of [1,2,3,4,5,6,7,8]; odd as isOdd; even as isEven">
  <p [ngClass]="{even: isEven, odd: isOdd}">
     {{ number }}
  </p>
 </div>
</section>

We have used ngClass non-structure directive to apply CSS class name even and odd respectively for even and odd element index. Let’s add CSS style for it.

.even {
  padding:2px;
  color: white;
  background-color: blue;
}
      
.odd {
   padding:2px;
   background-color: red;
   color: white;
}

Angular ngFor first local variable

Like even and odd element index, we have first and last local variables to the first and last element in a collection of ngFor directives.

  <div *ngFor="let item of items; index as i; first as isFirst">
    {{ i+1 }} -
    <span *ngIf="isFirst">First Element {{ item }}</span>
    <span *ngIf="!isFirst">{{ item }}</span>
  </div>

Angular ngFor local varaibles

We have demonstrated a few examples of local variables of ngFor directive. Here we had listed some of these local variables used in the ngFor directive.

Conclusion
We have learned the Angular *ngFor directive and demonstrated a few examples of it with the index local variable. I hope you got some idea of how we can use this directive.

Related posts

• How to implement Angular ngClass with and without conditions.?
• Angular dynamically adds and removes CSS Classes using ngClass | custom directive.
• An angular directive in detail with an example.
• How to implement the Angular ngStyle directive?