Angular 20 Standalone Component Skill

This skill helps create Angular 20 components following modern patterns and project standards.

Core Principles

Modern Angular 20 Patterns

• Standalone Components: 100% standalone, zero NgModules
• Signals: Use signal(), computed(), effect() for state
• New Syntax: input(), output(), @if, @for, @switch
• inject(): Function-based dependency injection
• OnPush: Change detection strategy for performance

Architecture Integration

• Presentation Layer: Components handle UI only
• Service Integration: Inject services for business logic
• No Direct Repository: Never inject repositories directly
• Event-Driven: Use EventBus for cross-module communication