Angular *ngFor Directive

Syntax

<element *ngFor="let item of items">{{ item }}</element>

Example

<ol>
  <li *ngFor="let fruit of fruits">{{ fruit }}</li>
</ol>

Output

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

Explanation

The *ngFor directive is a built-in directive in Angular that is used to loop over an array of items and display each item in the array. The * symbol before the directive indicates that it is a structural directive that can change the structure of the HTML.

Use

The *ngFor directive is used to display a list of items in Angular. It takes an array of items as input, and loops through the items to create a list.

Important Points

• The *ngFor directive is used to display a list of items in Angular.
• It can be used with various HTML elements such as div, li, and table.
• The directive takes an array of items as input and creates a list from it.
• The let keyword is used to declare a local variable to represent the current item in the loop.
• The index parameter can be used to get the index of the current item in the loop.

Summary

The *ngFor directive is a powerful tool for creating lists in Angular. It takes an array of items as input and loops through the items to create a list using HTML elements. Understanding the basic syntax and use cases for this directive is essential for building dynamic and interactive web applications with Angular.