AfterRenderEffect
Angular 19 • Doron Azulay
From Lifecycle to Reactivity
- Lifecycle hooks are being replaced by signal-based APIs.
- Angular 19 introduces
afterRenderEffect()for post-render work.
Lifecycle Hooks
- OnInit
- OnDestroy
- DoCheck
- OnChanges
- AfterContentInit / AfterContentChecked
- AfterViewInit / AfterViewChecked
Constructor / OnInit
Components should be cheap and safe to constructor.
ngOnInit() is a better place for a component to handle initial data.
OnInit Replacements
-
computed()- derived values -
linkedSignal()- connect signals to inputs -
resource()- async data loading - httpResource() -data fetching
-
effect()- reactive logic execution -
toObservable()- bridges to RxJS (effect under the hood)
OnDestroy → DestroyRef
OnChanges → effect() / computed() / linkedSignal()
The end of hooks?
AfterContentInit / AfterContentChecked
AfterViewInit / AfterViewChecked
The "After" Hooks
Run just once!
Run every CD cycle
💡 These new “After” hooks help to replace the old lifecycle hooks for DOM rendering,
but they’re not reactive - they don’t depend on signals or track reactive changes.
afterRenderEffect()
Live Coding
afterRenderEffect()
- Precise timing after Angular finishes rendering.
- Ideal for DOM measurements, animations, or external lib.
- Signals propagate between phases.
- Helps prevent layout thrashing by separating DOM reads and writes.
- Browser-only (no SSR).
- onCleanup() - runs cleanup logic when the effect re-runs or the component is destroyed.
Phase Rules
effect() vs afterRenderEffect()
