# Angular Best Practices

> |

- **Type:** Skill
- **Install:** `agentstack add skill-sajeetharan-angular-agent-kit-angular-best-practices`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sajeetharan](https://agentstack.voostack.com/s/sajeetharan)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sajeetharan](https://github.com/sajeetharan)
- **Source:** https://github.com/sajeetharan/angular-agent-kit/tree/main/skills/angular-best-practices
- **Website:** https://sajeetharan.github.io/angular-graphic/

## Install

```sh
agentstack add skill-sajeetharan-angular-agent-kit-angular-best-practices
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Angular Best Practices

Comprehensive performance optimization and modern Angular guide, containing 55+ rules across 12 categories, prioritized by impact to guide automated refactoring and code generation.

## When to Apply

Reference these guidelines when:
- Writing new Angular components or services
- Implementing change detection strategies
- Reviewing code for performance issues
- Refactoring existing Angular code
- Optimizing bundle size or load times
- Working with RxJS observables and state management
- Implementing forms and validation
- Writing unit and integration tests

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Signals & Reactivity | CRITICAL | `signals-` |
| 2 | Change Detection | CRITICAL | `cd-` |
| 3 | Bundle Size Optimization | CRITICAL | `bundle-` |
| 4 | Template Performance | HIGH | `template-` |
| 5 | RxJS & Async Operations | HIGH | `rxjs-` |
| 6 | Component Architecture | HIGH | `component-` |
| 7 | Dependency Injection | HIGH | `di-` |
| 8 | Routing & Navigation | MEDIUM | `routing-` |
| 9 | HTTP & Data Fetching | MEDIUM | `http-` |
| 10 | Forms & Validation | MEDIUM | `forms-` |
| 11 | Accessibility | MEDIUM | `a11y-` |
| 12 | Testing & Debugging | MEDIUM | `testing-` |
| 13 | Tooling | MEDIUM | `tooling-` |

## Quick Reference

### 1. Signals & Reactivity (CRITICAL)

- `signals-overview` - Use signals for reactive state management
- `signals-linked-signal` - Use linkedSignal for dependent writable state
- `signals-resource` - Use resource for async data fetching
- `signals-effects` - Use effects only for side effects, never for state sync

### 2. Change Detection (CRITICAL)

- `cd-onpush` - Use OnPush change detection strategy
- `cd-trackby` - Always use trackBy in *ngFor
- `cd-pure-pipes` - Prefer pure pipes over methods in templates
- `cd-immutable-data` - Use immutable data patterns
- `cd-detach-reattach` - Detach change detection for heavy computations
- `cd-run-outside-angular` - Run non-UI code outside NgZone

### 3. Bundle Size Optimization (CRITICAL)

- `bundle-lazy-loading` - Lazy load feature modules
- `bundle-tree-shaking` - Ensure tree-shakeable providers
- `bundle-standalone-components` - Use standalone components
- `bundle-defer-views` - Use @defer for heavy components
- `bundle-preload-strategies` - Implement smart preloading
- `bundle-avoid-barrel-exports` - Import directly, avoid barrel files

### 4. Template Performance (HIGH)

- `template-avoid-function-calls` - Avoid function calls in templates
- `template-async-pipe` - Use async pipe instead of manual subscriptions
- `template-ng-container` - Use ng-container for structural directives
- `template-control-flow` - Use new control flow syntax (@if, @for)
- `template-optimize-ngif-ngfor` - Never use *ngIf and *ngFor on same element
- `template-image-optimization` - Use NgOptimizedImage directive

### 5. RxJS & Async Operations (HIGH)

- `rxjs-avoid-nested-subscriptions` - Never nest subscriptions
- `rxjs-unsubscribe` - Always unsubscribe (takeUntilDestroyed, DestroyRef)
- `rxjs-share-replay` - Use shareReplay for HTTP caching
- `rxjs-switchmap-vs-mergemap` - Choose correct flattening operator
- `rxjs-signals-vs-observables` - Prefer signals for synchronous state
- `rxjs-debounce-throttle` - Debounce user input events

### 6. Component Architecture (HIGH)

- `component-smart-presentational` - Separate smart and presentational components
- `component-signal-inputs` - Use signal-based inputs and outputs
- `component-input-transforms` - Use input transforms for data conversion
- `component-output-naming` - Follow output naming conventions
- `component-content-projection` - Use content projection effectively
- `component-dynamic-components` - Load components dynamically when needed
- `component-host-directives` - Compose behavior with host directives

### 7. Dependency Injection (HIGH)

- `di-inject-function` - Use inject() function over constructor injection

### 8. Routing & Navigation (MEDIUM)

- `routing-guards` - Use functional route guards
- `routing-rendering-strategies` - Choose correct rendering strategy (CSR/SSR/SSG)

### 9. HTTP & Data Fetching (MEDIUM)

- `http-interceptors` - Use interceptors for cross-cutting concerns
- `http-caching` - Implement HTTP caching strategies
- `http-retry-logic` - Add retry logic for resilience
- `http-cancel-requests` - Cancel pending requests on navigation
- `http-typed-responses` - Always type HTTP responses
- `http-error-handling` - Implement centralized error handling

### 10. Forms & Validation (MEDIUM)

- `forms-signal-forms` - Use signal forms for Angular v21+ apps
- `forms-reactive-over-template` - Prefer reactive forms for complex forms
- `forms-typed-forms` - Use strictly typed reactive forms
- `forms-custom-validators` - Create reusable custom validators
- `forms-async-validation` - Debounce async validators
- `forms-control-value-accessor` - Implement ControlValueAccessor correctly
- `forms-form-arrays` - Handle dynamic form arrays efficiently

### 11. Accessibility (MEDIUM)

- `a11y-angular-aria` - Use Angular Aria for accessible components

### 12. Testing & Debugging (MEDIUM)

- `testing-zoneless-async` - Use zoneless async-first testing pattern
- `testing-component-harness` - Use component harnesses
- `testing-mock-services` - Mock services properly
- `testing-async-testing` - Use fakeAsync/tick for async tests
- `testing-change-detection` - Trigger change detection in tests
- `testing-marble-testing` - Use marble testing for RxJS
- `testing-performance-profiling` - Profile with Angular DevTools

### 13. Tooling (MEDIUM)

- `tooling-cli-generate` - Use Angular CLI for code generation and dependencies

## How to Use

Read individual rule files for detailed explanations and code examples:

```
rules/cd-onpush.md
rules/bundle-lazy-loading.md
rules/_sections.md
```

Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sajeetharan](https://github.com/sajeetharan)
- **Source:** [sajeetharan/angular-agent-kit](https://github.com/sajeetharan/angular-agent-kit)
- **License:** MIT
- **Homepage:** https://sajeetharan.github.io/angular-graphic/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sajeetharan-angular-agent-kit-angular-best-practices
- Seller: https://agentstack.voostack.com/s/sajeetharan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.