Angular ngFor Directive in Angular 12

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.

Angular ngFor example
<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 demonstrate an example of Angular ngFor index example. Let first define frameworks as an array object containing a list of frameworks in component typescript.

  frameworks: string[] = ['Angular', 'Reactjs', 'Vue'];
Angular ngFor index
<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.

Angular ngFor select option
<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 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 index. In this example, we will style different for even and odd element indexes. Here is a screenshot of our example.

Angular ngFor even and odd index
<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 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 variable to 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.

Local variableDescription
index: numberThe index of the current item in the iterable.
count: numberThe index of the current item in the iterable.
even: booleana boolean that is true if the element has an even index.
odd: booleana boolean that is true if the element has an odd index.
first: booleana boolean that is true if the element is the first of the collection.
last: booleana boolean that is true if the element is the last of the collection

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

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top