How to Use The for Loop in Angular

Angular has two distinct template APIs: AngularJS uses ng-repeat, while modern Angular supports the @for block in versions that include that syntax. For JavaScript array work inside application logic, use a for loop or forEach; these process data and do not render template elements by themselves.

Identify the Angular version before choosing a loop

First identify the framework used by the project. AngularJS is the older framework and renders collection items with the ng-repeat directive. Modern Angular uses a different template system; projects whose Angular version supports @for can use that block to render a collection. Check the syntax supported by your project version before adding it.

A JavaScript for loop or forEach belongs in component or controller logic when you need to calculate, transform, or otherwise process values. For rendering a collection, use the template API that matches the framework.

Render a list in AngularJS with ng-repeat

In an AngularJS template, ng-repeat="item in items" creates one copy of its element for each value in items. For example, the template fragment <ul><li ng-repeat="item in items">{{ item }}</li></ul> renders a list from a collection supplied by the controller or scope. With items set to ['Apple', 'Banana', 'Cherry'], the page contains one list item for each fruit. This is an AngularJS directive, not modern Angular syntax.

Render a list in modern Angular with @for

For a modern Angular project whose version supports the @for block, a template can use @for (item of items; track item.id) { <li>{{ item.name }}</li> } inside a list element. Here, items is the component’s collection, item is the current record, and track item.id gives Angular a stable identity for each record as the collection changes. Use a unique key from your data; adjust the property names to match the component. This syntax-only illustration has not been run in an Angular project for this article, so confirm it against the version and template setup used by your project.

Use JavaScript for and forEach for array processing

Use an imperative JavaScript loop when you need to calculate or transform values in application logic. The example below totals a collection of prices. It is a standalone JavaScript illustration and was not executed for this article.

const items = [
  { name: 'Notebook', price: 4 },
  { name: 'Pen', price: 2 }
];

let total = 0;
for (const item of items) {
  total += item.price;
}

console.log(`Total: $${total.toFixed(2)}`);

The loop reads each item and adds its price to total; the final line sends the formatted amount to the JavaScript console. A forEach callback is another option for an operation on every array member, for example items.forEach(item => console.log(item.name)). Use either form for data work; use ng-repeat or a supported @for block when the goal is to render elements in a template.

Choose a looping approach for the task

Template directives and blocks connect collection data to rendered elements. JavaScript loops run application logic, and any change to data should be made through the component or controller state used by the template.

Common questions about loops in Angular

Is ng-repeat available in modern Angular?

ng-repeat is an AngularJS directive. Modern Angular uses its own template syntax, including @for in versions that support it.

Can I use a JavaScript for loop in an Angular component?

Yes. Use it in component logic for calculations or other array processing. It does not create template elements; bind the resulting data to the template and use that template’s rendering syntax.

When should I use forEach?

Use forEach when a callback should run for each array item. Choose a regular for loop when the logic benefits from explicit control of the iteration. Neither form is a template rendering directive.

How do I add an item to a displayed collection?

Update the collection held by the component or controller, then let the relevant template syntax render the current values. The particular update method depends on how the application manages its state.