Componentsbeginner
Component Lifecycle Hooks
Know the sequence of lifecycle hooks Angular calls and what each one is meant for.
Angular components go through a predictable lifecycle from creation to destruction, and Angular exposes hooks at each meaningful transition so you can run code at exactly the right moment. Interviewers ask about this constantly because misusing a lifecycle hook is one of the most common sources of subtle bugs — like fetching data in the constructor instead of ngOnInit, or forgetting to clean up in ngOnDestroy.
Think of a hotel guest's stay: check-in (ngOnInit), housekeeping checking the room daily (ngDoCheck), the guest rearranging furniture (ngAfterViewInit), and checkout where the room must be cleared out (ngOnDestroy) before the next guest arrives.
Key Concepts
1
The key insight is that the constructor is for dependency injection only, not for component setup, because at construction time Angular hasn't yet set the component's @Input() properties. ngOnInit runs once, right after the first ngOnChanges, and is the idiomatic place to do initialization work like fetching data or setting up subscriptions.
@Input()ngOnInitngOnChanges
2
Other hooks matter for narrower cases: ngOnChanges fires whenever an @Input() reference changes, ngAfterViewInit fires once the component's view (and child views) has been fully initialized, and ngOnDestroy is your only reliable chance to unsubscribe from observables, clear intervals, or detach event listeners before the component is removed from the DOM.
ngOnChanges@Input()ngAfterViewInitngOnDestroy
3
A strong interview answer connects lifecycle hooks to real bugs: memory leaks from missing ngOnDestroy cleanup, or ExpressionChangedAfterItHasBeenCheckedError from touching bound values inside ngAfterViewInit without wrapping the change in a change-detection-safe pattern.
ngOnDestroyExpressionChangedAfterItHasBeenCheckedErrorngAfterViewInit