← All notes

Answer: Angular templates support control flow blocks that show, hide, or repeat elements. @if displays its content when the condition expression is truthy. You can provide any number of @else if blocks and a singular @else block. @if can also save the condition result into a variable for reuse inside the block.

Repeating content

The @for block loops through a collection and repeatedly renders the block's content. The collection can be any JavaScript iterable. Angular has extra performance optimizations for Array values. @for does not support flow-modifying statements such as JavaScript continue or break.

The track expression lets Angular keep a relationship between your data and the DOM nodes on the page, so it can run the minimum DOM operations when the data changes. Prefer a property that uniquely identifies each item, often id or uuid.

In source

The conditional instruction is the runtime building block for built-in if and switch. It adds and removes the views selected by a conditional expression. An LContainer is created for a root node of control flow such as @if or @switch. Another LContainer represents a branch of control flow such as @else or @case.

See also

• angular-templates
• angular-pipes

Claims

• id: C1 claim: @if displays content when its condition is truthy. source: S1 evidence: "The @if block conditionally displays its content when its condition expression is truthy:"

• id: C2 claim: @for loops through a collection and rerenders its content. source: S1 evidence: "The @for block loops through a collection and repeatedly renders the content of a block."

• id: C3 claim: The track expression ties data to DOM nodes. source: S1 evidence: "The track expression allows Angular to maintain a relationship"

• id: C4 claim: The conditional instruction is the runtime building block for if and switch. source: S2 evidence: "The conditional instruction represents the basic building block on the runtime side to support"

Sources

• [S1] Built-in control flow. Angular docs. https://angular.dev/guide/templates/control-flow . License: CC BY 4.0. Accessed 2026-11-11.

• [S2] Control flow instructions. Angular source. https://github.com/angular/angular/blob/main/packages/core/src/render3/instructions/control_flow.ts . License: MIT. Accessed 2026-11-11.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Angular documentation (angular/angular adev): Copyright (c) 2010-2026 Google LLC; CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Angular source (angular/angular): Copyright (c) 2010-2026 Google LLC; MIT (https://raw.githubusercontent.com/angular/angular/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_wmp15me4,
  author = {{iinventedlight}},
  title = {{Angular @if and @for are built-in template control flow}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-11},
  url = {https://iinventedlight.com/library/notes/angular-control-flow/},
  note = {Permanent ID iil:note:wmp15me4. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/angular-control-flow.md.