# Angular Best Practices

> Curated Angular best practices for building performant, maintainable applications. Library-specific rules available as optional skills.

- Skill: `diegosouzapw/angular-best-practices` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/angular-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/angular-best-practices/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Productivity
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/angular-best-practices

---


# Angular Best Practices

Curated rules for building performant, maintainable Angular applications. Library-specific rules (NgRx, SignalStore, TanStack Query) available as optional skills.

## When to Use

Apply these practices when:
- Creating components, services, and directives
- Setting up state management with Signals
- Writing unit, component, and E2E tests
- Optimizing bundle size and runtime performance
- Implementing forms, routing, and SSR

## Categories

| Category | Rules | Impact |
|----------|-------|--------|
| Bundle Optimization | 5 | CRITICAL |
| Signals & Reactivity | 5 | HIGH |
| Change Detection | 5 | HIGH |
| Component Patterns | 4 | HIGH |
| RxJS Patterns | 5 | HIGH |
| Testing | 6 | HIGH |
| TypeScript | 14 | MEDIUM |

## Optional Library Skills

Install library-specific rules alongside this core skill:

| Library | Install Command |
|---------|----------------|
| NgRx | `npx skills add alfredoperez/angular-best-practices/skills/angular-best-practices-ngrx` |
| SignalStore | `npx skills add alfredoperez/angular-best-practices/skills/angular-best-practices-signalstore` |
| TanStack Query | `npx skills add alfredoperez/angular-best-practices/skills/angular-best-practices-tanstack` |

## Quick Reference

### Modern Angular Patterns

| Pattern | Use | Avoid |
|---------|-----|-------|
| Signal inputs | `input<T>()` | `@Input()` |
| Signal outputs | `output<T>()` | `@Output()` |
| Dependency injection | `inject()` | Constructor injection |
| Control flow | `@if`, `@for`, `@switch` | `*ngIf`, `*ngFor` |
| Class binding | `[class.active]` | `[ngClass]` |
| Change detection | `OnPush` | Default |
| Derived state | `computed()` | Getters |

### Component Template

```typescript
@Component({
  selector: 'app-user-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (user(); as u) {
      <h2>{{ u.name }}</h2>
      <button (click)="selected.emit(u)">Select</button>
    }
  `,
})
export class UserCardComponent {
  user = input.required<User>();
  selected = output<User>();
}
```

### Service Template

```typescript
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}
```

### State with Signals

```typescript
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}
```

## License

MIT