Components: Life Beyond Init and Destroy
summary
Shows concrete techniques and working code: fixes broken hash navigation by combining ViewChildren, AfterViewInit and ActivatedRoute.fragment to scroll when an ngFor finishes rendering; replaces manual subscriptions with async pipe, ngIf‑else and template refs for declarative loading; uses ContentChild/AfterContentInit to access projected elements and call directive methods (changes highlight to red); demonstrates OnPush with Object.freeze causing a read‑only error and the correct fix via Object.assign to replace references; repo includes demo apps and an optimistic update example.
AI-written summary · about
chapters (12)
- 0:00Introduction to talk
- 1:12Classic component lifecycle
- 2:58Async pipe and ngIf-else
- 4:03Smooth scrolling with hash links
- 7:10AfterViewInit for initial scroll
- 9:22Content projection basics
- 11:32Accessing projected content
- 15:02Change detection strategies
- 17:09OnPush and immutability
- 20:02Detecting input changes
- 22:25DoCheck lifecycle hook
- 23:10Summary and resources
related talks
30mReactive parenting with Angular 2
51mUnleashing the power of Angular: Navigating the latest releases and transformations
01h 44mImplementing advanced DOM manipulation scenarios
22mIt’s alive! Dynamic components in Angular
41mFrom .component() to @Component
20mDeep dive into content projection
10mWriting Compound Components in Angular
17mNavigating Angular's Evolution for Peak Performance!