---
name: angular-builder
description: "Modern Angular: signals, standalone components, RxJS, NgModules-free architecture. Builds Angular 18+ apps with the new model — signals for state, standalone components, control flow syntax, deferrable views. Drops NgModules entirely when starting fresh."
license: MIT
---

# Angular Builder

Angular Builder scaffolds and writes Angular 18+ code using the framework's current model: signals for reactive state, standalone components instead of NgModules, the built-in control flow blocks, and deferrable views. It targets developers starting fresh projects or migrating older module-based code toward the modern, leaner Angular style.

## When to use it

- Bootstrapping a new app where you want zero `NgModule` boilerplate from day one.
- Converting `@Input()`/`@Output()` decorators to `input()`, `output()`, and `model()` signal APIs.
- Replacing `*ngIf`, `*ngFor`, and `*ngSwitch` with the `@if` / `@for` / `@switch` control flow blocks.
- Adding lazy, viewport-triggered UI with `@defer` instead of hand-rolled lazy loading.
- Untangling subscription-heavy components by moving RxJS streams into signals via `toSignal()`.

## What it does

It generates standalone components (`standalone: true`, `imports: [...]` directly on the decorator) and wires bootstrapping through `bootstrapApplication()` with `app.config.ts` providers like `provideRouter()` and `provideHttpClient()`. State is modeled with `signal()`, derived values with `computed()`, and side effects with `effect()`. Component inputs use the signal-based `input()` / `input.required()`, two-way binding uses `model()`, and events use `output()`.

Templates favor the new control flow (`@for` with its mandatory `track` expression, `@empty` blocks) and `@defer (on viewport)` / `@defer (on interaction)` for chunk-splitting. For async data it bridges RxJS and signals using `toSignal()` and `toObservable()` from `@angular/core/rxjs-interop`, keeping `async` pipe usage minimal.

## Example

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/angular-builder/SKILL.md https://claudeskil.com/skills/angular-builder/SKILL.md

# then, in your project:
ng new storefront --standalone --routing --style=scss
```

```ts
@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    @for (item of items(); track item.id) {
      <li>{{ item.name }} — {{ item.qty }}</li>
    } @empty {
      <li>Cart is empty</li>
    }
    <p>Total: {{ total() }}</p>
  `,
})
export class CartComponent {
  items = input.required<Item[]>();
  total = computed(() => this.items().reduce((s, i) => s + i.qty, 0));
}
```

## Tips & gotchas

- `@for` requires a `track` expression — omitting it is a compile error, not a warning. Use a stable id, not `$index`, when items reorder.
- Reading a signal is a function call: `total()`, never `total`. Forgetting the parentheses silently passes the function reference.
- `effect()` must run in an injection context (constructor or field initializer); calling it inside `ngOnInit` throws.
- `@defer` only code-splits when its dependencies are used *exclusively* inside the block — a shared import keeps the chunk eager.

## FAQ

**Can I still use NgModules?** Yes. Standalone components are interoperable; the skill drops modules only for greenfield code and leaves existing modules intact unless you ask it to migrate.

**Do I need to abandon RxJS?** No. Signals handle local state; RxJS still shines for event streams, debouncing, and HTTP. Use `toSignal()` to consume observables in templates.

**Which Angular version is required?** Signal inputs and stable control flow need Angular 17.1+/18; the skill assumes 18+ for full deferrable-view and `model()` support.