"Simpler Enterprise Angular Components with Smart Directives"
summary
A design pattern called smart directives extracts observable and store logic out of overloaded smart components so page components only handle layout; implemented on a TasteTrove demo with Angular 17, NGXS stores, Tailwind, standalone components and onPush change detection. One smart component grew to ~1,000 lines and converting to directives removes hundreds of lines, makes selector streams reusable and cascable, and works in practice, with tradeoffs around unclear input/output ownership and flaky ngOnChanges behavior.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:49Demo app overview
- 3:14State management journey
- 7:28Smart component limits
- 8:33Live demo
- 12:45Q&A
- 14:17Smart directives concept
- 15:19Code conversion
- 19:54Cascading smart directives
- 22:20Benefits of smart directives
- 23:02Challenges with Angular
- 24:30Testing smart directives
- 26:17Closing
related talks
23mSmart and Dumb Components
20mEngineering Scalable Angular Components
27mThe good, the bad and the ugly - Component architecture at scale
30mAngular: Keeping it Fat, Dumb, and Happy: An Architectural Approach
20mThoughtful Component Design
27mAngular Architecture: From Patterns to Implementation
28mFrom Scratch to Screen: The Art of Component Design in Angular
18mFlexible data flow architecture in Angular