Looping with @for
Render lists with @for and track expressions.
Looping with @for is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Looping with for
The at-for block repeats content for each item in a collection. It replaces the old star-ngFor directive and requires a track expression.
Basic for Syntax
Write an at-symbol, the word for, then item of items, and a required track clause naming a unique key.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Why track Is Required
The track expression tells Angular how to identify each item across changes, so it can reuse DOM nodes instead of recreating them. This greatly improves performance.
Tracking by Identity
If items lack a stable id (for example a list of primitive strings), you can track by the item itself.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }The empty Block
An at-empty block renders when the collection has no items. It follows the closing brace of the at-for block.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Contextual Variables
Inside an at-for block, helpful variables are available, including index, count, first, last, even, and odd. Capture them with let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }The index Variable
The dollar-index value gives the zero-based position of the current item, often aliased to a local variable as shown above.
first and last
The dollar-first and dollar-last booleans are true for the first and last items, handy for styling or separators.
even and odd
The dollar-even and dollar-odd booleans help with alternating row styles.
Looping Over a Signal
The collection can come from a signal; simply call it in the for expression.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Performance Benefit
Because track is mandatory, the new at-for is faster than star-ngFor without trackBy, since Angular always knows how to match items to DOM nodes.
Quick Check: Looping
The for block requirement.
Recap: Looping
You learned the at-for block with its mandatory track expression, the at-empty block for empty collections, and contextual variables like index, first, last, even, and odd. It replaces star-ngFor. Next: switching with at-switch.
Frequently asked questions
Is the “Looping with @for” lesson free?
Yes — the full text of “Looping with @for” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Looping with @for”?
Render lists with @for and track expressions. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Looping with @for” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.