Modern Control Flow: @if and @for (New Angular Syntax)

Modern Angular introduced a new template control flow syntax like @if and @for. It can make templates cleaner and more readable.

@if example

@if (isLoggedIn) {
  <h2>Welcome back!</h2>
} @else {
  <h2>Please sign in</h2>
}

@for example

<ul>
  @for (skill of skills; track skill) {
    <li>{{ skill }}</li>
  }
</ul>

Component:

export class SkillsComponent {
  isLoggedIn = true;
  skills = ['TypeScript', 'Angular', 'RxJS'];
}

Why developers like it

• Templates read more like normal programming
• Less ng-template noise in many cases
• track is built in and encouraged

When to use it

If your Angular version supports it and your team agrees on style, it’s a great upgrade for readability.

Next set (remaining 30): Signals, computed/effect, advanced routing patterns, resolvers, state management, testing, and deployment.