Looping with @for
Render lists with @for and track expressions.
Looping with @for is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “Looping with @for” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “Looping with @for”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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.