Ng22 control flow

Skill PavanAnguluri/angular22-agent-skills/skills/ng22-control-flow

Angular 22 Agent Skills

Install

npx -y skills add PavanAnguluri/angular22-agent-skills --skill ng22-control-flow

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Instructs the agent to exclusively write templates using modern native block control flow.

SKILL.md

2.4 KB, as published. Nobody here has run it

Angular 22 Control Flow & Template Directives

You must reject legacy template structural directives such as *ngIf, *ngFor, and *ngSwitch. Use the native block syntax because it is compiler-optimized, more expressive, and easier to read.

Core Rules

Use @if for most conditional rendering.
Use @for for repeated collections and always supply a meaningful track expression.
Use @empty when a collection can reasonably be empty.
Use @switch for union-like states where exhaustiveness matters.
Prefer template aliases with as when the condition or expression is reused inside the block.

Conditionals with `@if`

@if (user.profile.settings.startDate; as startDate) {
  <p>Joined on {{ startDate | date }}</p>
} @else if (user.isPending()) {
  <p>Verifying access status...</p>
} @else {
  <app-login-form />
}

Use @if aliases for long expressions that would otherwise be repeated in the block.

Iteration with `@for`

The track clause is mandatory for performance and correctness. Use a stable identifier like id or uuid. Use $index only for static primitive lists.

@for (item of items(); track item.id; let index = $index, first = $first) {
  <div class="list-item">
    <span>#{{ index + 1 }}</span>
    <span>{{ item.name }}</span>
    @if (first) {
      <strong>Featured</strong>
    }
  </div>
} @empty {
  <p>No inventory found in this region.</p>
}

Exhaustive branching with `@switch`

Use @switch when the UI state is a small discrete union and you want compile-time coverage of all cases.

@switch (status()) {
  @case ('loading') {
    <p>Loading...</p>
  }
  @case ('success') {
    <app-results />
  }
  @case ('error') {
    <app-error-panel />
  }
  @default {
    <p>Unknown state.</p>
  }
}

Anti-Patterns

Do not mix old structural directives with new control flow in the same template.
Do not use @for without track unless the data is a static primitive list.
Do not hide complex branching in helper methods if a block expression reads clearly.
Do not use @switch when @if is more readable.

Review Checklist

No *ngIf, *ngFor, or *ngSwitch remains.
Every loop has a useful track clause.
Every empty collection case is handled where needed.
The template reads like the rendering logic, not like a workaround.