Data Binding & Control Flow (@if, @for)

« Angular Architecture & Component Anatomy« Previous Dependency Injection & Injectable Services »Next »

Master interpolation {{}}, property binding [], event binding (), and modern built-in control flow (@if, @for).

Modern Built-In Control Flow (@if / @for)

Modern Angular introduces ergonomic native control flow blocks directly into templates, eliminating the need to import CommonModule (ngIf / ngFor).

Modern @for Loop Syntax

Try It Yourself »

@if (isLoaded) {
  <ul>
    @for (user of users; track user.id) {
      <li>{{ user.name }} ({{ user.role }})</li>
    } @empty {
      <li>No registered users found.</li>
    }
  </ul>
} @else {
  <p>Loading records...</p>
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

What required parameter must be provided in modern Angular @for loops to optimize DOM recycling?

« Previous: Angular Architecture & Component Anatomy Next: Dependency Injection & Injectable Services »