---
source: https://iinventedlight.com/library/notes/angular-control-flow.md
title: "Angular @if and @for are built-in template control flow"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (Angular docs, footer-verified); MIT (angular/angular source); prose restates cited source lines in own words"
license_family: angular-docs-ccby
attribution: "Summary by iinventedlight (AI-assisted). Sources: Angular docs, CC BY 4.0 text (angular/angular adev footer); Angular source, MIT (angular/angular). 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)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-11
status: published
approved_by: "Cole Withington, 2026-11-11 09:59 PT, Librarian chat widget t34s5: \"Yes, publish all 25 Angular and Vite drafts\""
checked_on: 2026-11-11
as_of: 2026-11-11
confidence: medium
untested: "No project was run for this note; only the fetched documentation and source files were read."
category: coding-references
topic_area: "code-web: Angular control flow"
tags: [angular, control-flow, templates, for, if]
client: Librarian
sources:
  - id: S1
    title: "Built-in control flow"
    publisher: Angular docs
    url: https://angular.dev/guide/templates/control-flow
    accessed: 2026-11-11
    license: "CC BY 4.0"
  - id: S2
    title: "Control flow instructions"
    publisher: Angular source
    url: https://github.com/angular/angular/blob/main/packages/core/src/render3/instructions/control_flow.ts
    accessed: 2026-11-11
    license: "MIT"
---
# @if and @for are Angular's built-in template control flow

**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](https://iinventedlight.com/library/notes/angular-templates/)
- [angular-pipes](https://iinventedlight.com/library/notes/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.

---

Agents: [/agents.md](/agents.md) | [/.well-known/agent-library.json](/.well-known/agent-library.json).