for loop in Angular

Contextual Variables

 Angular provides contextual variables within the @for loop that help manage and track iteration more effectively:

1. index: Represents the current index in the loop.
    
2. count: Provides the total number of items in the array.
    
3. first: Returns true for the first item in the iteration.
    
4. last: Returns true for the last item in the iteration.
    
5. odd: Returns true for odd index numbers.
    
6. even: Returns true for even index numbers.

Example:

@for (item of items; track item) {
    <p>Item: {{ item }} - Index: {{ index }}</p>
}

Steps to Implement @for Loop

Step 1: Create an Angular Component

First, create a new  Angular component if you haven't already:

ng generate component for-loop-example

Step 2: Define an Array in the Component

In for-loop-example.component.ts, define an array:

import { Component } from '@angular/core';

@Component({
  selector: 'app-for-loop-example',
  templateUrl: './for-loop-example.component.html',
  styleUrls: ['./for-loop-example.component.css']
})
export class ForLoopExampleComponent {
  items: string[] = ['Angular', 'React', 'Vue', 'Svelte'];
}

Step 3: Use the @for Loop in the Template

In for-loop-example.component.html, implement the loop:

@for (item of items; track item) {
    <p>{{ item }}</p>
}

Step 4: Run the Application

Save the files and run your Angular application using:

ng serve

Example 1: Simple for loop

In this example, we will use the @for loop to display a list of programming languages.

Component (TypeScript)

import { Component } from '@angular/core';

@Component({
  selector: 'app-simple-loop',
  templateUrl: './simple-loop.component.html',
  styleUrls: ['./simple-loop.component.css']
})
export class SimpleLoopComponent {
  languages: string[] = ['JavaScript', 'Python', 'Java', 'C++'];
}

Template (HTML)

@for (language of languages; track language) {
    <p>Programming Language: {{ language }}</p>
}

Output

Programming Language: JavaScript
Programming Language: Python
Programming Language: Java
Programming Language: C++

Example 2: @for Loop with Track as Index

In this example, we will use a track with an index for better efficiency.

Component (TypeScript)

import { Component } from '@angular/core';

@Component({
  selector: 'app-track-example',
  templateUrl: './track-example.component.html',
  styleUrls: ['./track-example.component.css']
})
export class TrackExampleComponent {
  students = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
}

Template (HTML)

@for (student of students; track student.id) {
    <p>ID: {{ student.id }} - Name: {{ student.name }}</p>
}

Output

ID: 1 - Name: Alice
ID: 2 - Name: Bob
ID: 3 - Name: Charlie

Frequently Asked Questions

What is the purpose of the @for loop in Angular?

The @for loop helps iterate over collections and render elements dynamically in Angular templates.

How does track improve performance in the @for loop?

Tracking elements ensuresAngular  efficiently updates the DOM by keeping track of each element, reducing unnecessary re-renders.

Can we use contextual variables inside the @for loop?

Yes, Angular provides variables like index, count, first, last, odd, and even to help manage iteration effectively.

Conclusion

In this article, we covered on how to use the for loop in Angular with the *ngFor directive to iterate over arrays and display dynamic content in templates. The *ngFor directive simplifies rendering lists efficiently. Understanding how to use it helps in building dynamic, interactive, and well-structured Angular applications with better data handling.