Sign in
Skip to solution
easyFrontend

Explain the new Control Flow (@if, @for, @switch) and how it compares to structural directives.

931 views
01

Understand the problem

Contrast the new block syntax in Angular 17 with *ngIf, *ngFor, and *ngSwitch.

control-flowdirectives
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

The new built-in control flow syntax (@if, @for, @switch) does not require importing structural directives or CommonModule. It features a clean syntax, supports automatic track-by enforcement in loops, and yields better performance because it compiles to plain JavaScript operations rather than directive lookups

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Modern block control flow in Action
import { Component } from '@angular/core';

@Component({
  selector: 'app-flow-demo',
  standalone: true,
  template: '<h3>Users</h3>' +
    '@if (isAdmin) {' +
    '  <p class="badge">Admin Panel Mode</p>' +
    '} @else {' +
    '  <p class="badge">User Mode</p>' +
    '}' +
    '<ul>' +
    '  @for (user of users; track user.id; let idx = $index) {' +
    '    <li>#{{ idx }}: {{ user.name }}</li>' +
    '  } @empty {' +
    '    <li>No users registered.</li>' +
    '  }' +
    '</ul>'
})
export class FlowDemoComponent {
  isAdmin = false;
  users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ];
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 1 of 121 decoded in the Angular track. One more won't hurt.

Back to track