VisaSpark
Sign in
intermediate18 min

Structural Directives: @if and @for

Angular's control-flow syntax for conditionally showing content and rendering lists.

What you'll learn

  • Use @if / @else to conditionally render template content
  • Use @for to render a template block once per item in a collection
  • Explain what @for's required track expression is for

Explanation

Modern Angular's built-in control-flow syntax lets a template conditionally show content or repeat a block for each item in a collection, directly in the template (not as a separate directive attribute like the older *ngIf/*ngFor syntax, though you may still see that older form in existing codebases).

@if / @else conditionally render a block:

@if (isLoggedIn) {
  <p>Welcome back!</p>
} @else {
  <p>Please log in.</p>
}

@for repeats a block once per item in a collection, and requires a track expression telling Angular how to identify each item across re-renders (usually a unique id) -- this lets Angular efficiently update only the DOM elements that actually changed, rather than re-rendering the whole list:

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

Since a live template can't render on this platform, this course's labs model the underlying data transformation (filtering, mapping) that would drive what @if/@for display, in plain TypeScript.

Guided lab

Predict: The data transformation behind an @for list

AngularNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This models the plain-TypeScript data transformation that would drive an @for block's rendered list (this platform can't render the actual template). Predict the resulting array.

interface Task {
  id: number;
  title: string;
  done: boolean;
}

const tasks: Task[] = [
  { id: 1, title: "Buy milk", done: true },
  { id: 2, title: "Write report", done: false },
  { id: 3, title: "Call Sam", done: false },
];

const remaining = tasks.filter((t) => !t.done).map((t) => t.title);
console.log(remaining);

Stuck? Get a hint.

Common mistakes

  • Forgetting @for requires a track expression -- omitting it is a compile error in modern Angular, precisely because efficient list updates depend on it.
  • Using array index as the track value when items can be reordered/inserted/removed, causing incorrect re-render behavior -- a stable unique id is safer.
  • Mixing up the newer @if/@for block syntax with the older *ngIf/*ngFor attribute directives from pre-existing Angular code -- both exist in real codebases today, but they're written differently.

Knowledge check

Knowledge check

1. What is required alongside @for's collection expression?
2. What does @else pair with?
3. Why might tracking by array index be risky for @for?

Takeaway

@for always needs a track expression (prefer a stable unique id over array index), and @if/@else conditionally render template content.

Summary

Modern Angular's @if/@else and @for control-flow blocks replace the older *ngIf/*ngFor directive syntax; @for's track expression is required for efficient list updates.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Inputs and Outputs: Parent-Child Communication →