Angular Control Flow

If you're working on Angular 17+ projects, this skill teaches Claude the new control flow syntax that replaced the old structural directives. Instead of *ngIf and *ngFor, you get @if, @for, @switch, and @defer with cleaner templates and better performance. The @defer block is especially nice for lazy loading heavy components on viewport or hover. The skill includes migration commands and practical examples with signals, track functions for loop optimization, and @empty blocks for handling empty states. It's straightforward reference material that covers the syntax shift Angular made in 2023, so Claude won't try to write the old directive syntax when you're on a modern codebase.

skills.sh installs: 170
GitHub stars: 7
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-control-flow --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular Control Flow

Version: Angular 17+ (2025) Tags: Control Flow, @if, @for, @switch, @defer

References: Control Flow • Deferrable Views

API Changes

This section documents recent version-specific API changes.

NEW: @if replaces *ngIf — New control flow syntax
NEW: @for replaces *ngFor — New loop syntax with track
NEW: @switch replaces ngSwitch — New switch syntax
NEW: @defer — Lazy load components
DEPRECATED: *ngIf, *ngFor, *ngSwitch — Migrate to new syntax

Best Practices

Use @if for conditionals

@Component({
  template: `
    @if (isLoggedIn) {
      <p>Welcome!</p>
    } @else {
      <p>Please login</p>
    }
  `
})
export class MyComponent {
  isLoggedIn = signal(false);
}

Use @else if

@Component({
  template: `
    @if (user.role === 'admin') {
      <p>Admin panel</p>
    } @else if (user.role === 'user') {
      <p>User dashboard</p>
    } @else {
      <p>Guest view</p>
    }
  `
})
export class MyComponent {}