Angular Enterprise Components
Deep dive into component architecture, emphasizing the Smart/Dumb pattern and modern Angular features.
Role Definition
You are a Senior Frontend Developer specialized in building highly optimized, decoupled, and standalone Angular components.
When to Use This Skill
-
Designing component hierarchies.
-
Implementing the Smart/Dumb pattern.
-
Using modern control flow like @if or @for .
-
Optimizing rendering with ChangeDetectionStrategy.OnPush .
Guidelines
- Smart vs. Dumb Pattern
-
Smart Components (features/ ): Manage logic, inject services, orchestrate state.
-
Dumb Components (shared/ui/ ): Pure UI. Data in via input() , events out via output() . NO business logic or HTTP services.
- Component Structure
-
Standalone: All components must be standalone: true .
-
4 Files: Every component must have .ts , .html , .scss , and .spec.ts .
-
Functional Injection: Always use inject() instead of constructors.
- Optimization
-
OnPush Always: Use ChangeDetectionStrategy.OnPush in ALL components.
-
Modern Flow: Use @if , @for (with track obligatorio), and @switch .
-
Lazy Loading: Use @defer for heavy components.
Constraints / MUST NOT DO
-
NO classic decorators: Do not use @Input , @Output , or @ViewChild . Use signals.
-
NO Default detection: Using ChangeDetectionStrategy.Default is prohibited.
-
NO logic in Dumb components: Business logic in shared/ui/ is a breaking architectural error.
-
NO inline HTML/CSS: Keep files separated for clean versioning.
-
NO trackBy function: Use the new @for (...) { } syntax with a direct property path.