angular-components

What problem does it solve?

Developing Angular UI components often involves verbose wiring of inputs and outputs, boilerplate state management, and inconsistent lifecycle handling. This skill provides a structured approach to create, refactor, and optimize components using signals, content projection, and OnPush change detection to improve maintainability and performance.

Core Features & Use Cases

• Build components using signals for inputs, outputs, and two-way binding with models
• Apply smart/presentational patterns to separate concerns, improve testability, and facilitate reuse
• Leverage content projection with ng-content, view queries, and lifecycle hooks for robust UI composition
• Use OnPush change detection and computed signals to minimize re-renders and enhance performance
• Use this skill when creating, debugging, or refactoring Angular components, especially for complex UIs

Quick Start

Scaffold an Angular component using signals, then optimize it with OnPush and content projection.