Weeks 34: Directives, Forms, and Dependency Injection

Learning Objectives

• Build custom attribute and structural directives to encapsulate template behavior.
• Implement template-driven and reactive forms, including validation and form state management.
• Leverage Angular's dependency injection (DI) system for services, tokens, and application configuration.
• Write integration tests that cover directive behavior and form validation logic.

Core Concepts & References

• Angular Docs: Template Syntax, Forms Overview, Dependency Injection
• Video: Deborah Kurata – Angular Dependency Injection Best Practices
• Blog: Understanding Structural Directives on Angular In Depth

Hands-On Checklist

1. Implement a custom attribute directive (e.g., appHighlight) that changes styling based on condition and host events.
2. Build a structural directive (appIfViewport) that renders content only when viewport width exceeds a breakpoint using ngTemplateOutlet.
3. Create a multi-step reactive form with nested FormGroups, custom synchronous and asynchronous validators, and submit handling.
4. Design a shared ApiService with configurable base URL via injection token; demo consumption in multiple components.
5. Write tests: - Directive tests asserting DOM manipulation using Angular Testing Library. - Reactive form tests verifying validator behavior and service interactions.

Deliverable: Component Library with Stories & Tests

• Augment Week 1-2 components with stories that demonstrate directives and form-driven interactions.
• Provide Storybook controls or sandbox toggles to visualize directive states.
• Ensure at least one Jest/Karma test suite covers directives and forms.

Suggested Daily Breakdown

• Day 1: Review template syntax, build attribute directive, add tests.
• Day 2: Build structural directive, integrate into sandbox/story.
• Day 3: Implement template-driven form variant.
• Day 4: Rebuild form using reactive forms with validators and async checks.
• Day 5: Introduce DI-powered services; create injection tokens for configuration.
• Day 6: Write integration tests for directives and forms; ensure CI commands pass.
• Day 7: Polish documentation, record demo of directive + form usage.

Reflection & Extension

• Compare template-driven vs reactive forms in a decision matrix for future projects.
• Analyze DI scopes (providedIn) and the impact on service lifetime.
• Stretch goal: integrate a form state management helper (e.g., NgRx Component Store) to sync form data across components.