Angular Component and Module Template

Create Angular component template for:

Component Name: {{COMPONENT_NAME}}
Pattern: {{PATTERN}} (Standalone/NgModule)
State Management: {{STATE}} (Services/NgRx/Signals)
Component Type: {{TYPE}} (smart/presentational)

Generate complete Angular structure:

1. **Component (component.ts):**
   - Standalone or NgModule component
   - Input/Output decorators
   - Signal inputs (Angular 17+)
   - Lifecycle hooks
   - ChangeDetection strategy
   - Host bindings

2. **Template (component.html):**
   - Angular directives
   - Control flow (@if/@for)
   - Event bindings
   - Template references
   - ng-content projection

3. **Styles (component.scss):**
   - Component styles
   - Host element styling
   - CSS custom properties
   - Animations

4. **Module (if NgModule pattern):**
   - Declarations
   - Imports
   - Exports
   - Providers

5. **Service:**
   - Injectable configuration
   - HTTP client usage
   - State management
   - Error handling

6. **State (NgRx if applicable):**
   - Actions
   - Reducers
   - Selectors
   - Effects

7. **Testing:**
   - Component test bed
   - Mock services
   - Async testing
   - DOM testing

8. **Routing:**
   - Route configuration
   - Guards
   - Resolvers
   - Lazy loading

Include both Ivy and traditional patterns where applicable.