What are Angular lifecycle hooks and in what order do they run?
Understand every Angular lifecycle hook and the exact order they run — from ngOnChanges and ngOnInit through the view hooks to ngOnDestroy, with examples.
Expected Interview Answer
Angular lifecycle hooks are methods Angular calls at specific moments in a component or directive's life — from creation through change detection to destruction — letting you run logic at the right time.
The order is: ngOnChanges (on bound input changes), ngOnInit (once after first inputs are set), ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, and finally ngOnDestroy. ngOnChanges runs before ngOnInit and again whenever an input changes; the DoCheck and AfterChecked hooks run on every change-detection cycle, while ngOnDestroy runs once just before Angular removes the component.
- Run initialisation logic at the correct moment
- React to input property changes
- Hook into view and content projection readiness
- Clean up subscriptions to prevent memory leaks
- Debug and understand change detection timing
AI Mentor Explanation
Lifecycle hooks are like the fixed phases of a match: the toss and warm-up before play, the opening over once the game starts, checks between every over, the innings break, and the presentation after stumps — each phase triggers specific duties, and skipping to a later one before the earlier finishes would break the match's flow.
Step-by-Step Explanation
Step 1
ngOnChanges
Runs first and on every change to a data-bound @Input, receiving a SimpleChanges object.
Step 2
ngOnInit
Runs once after the first ngOnChanges — ideal for initial data fetching and setup.
Step 3
ngDoCheck and content hooks
ngDoCheck, then ngAfterContentInit and ngAfterContentChecked handle custom change detection and projected content.
Step 4
View hooks
ngAfterViewInit and ngAfterViewChecked run once the component's own view and child views are ready.
Step 5
ngOnDestroy
Runs once just before the component is destroyed — unsubscribe and clean up here.
What Interviewer Expects
- Names the hooks in the correct order
- Knows ngOnChanges fires before ngOnInit
- Explains ngOnInit runs only once
- Uses ngOnDestroy for cleanup to avoid memory leaks
- Distinguishes content hooks from view hooks
Common Mistakes
- Claiming ngOnInit runs before ngOnChanges
- Putting input-dependent logic in the constructor instead of ngOnInit
- Forgetting to unsubscribe in ngOnDestroy
- Confusing ngAfterViewInit with ngAfterContentInit
- Thinking ngOnInit runs on every change detection cycle
Best Answer (HR Friendly)
“Lifecycle hooks are special methods Angular calls automatically at key moments of a component's life, like when it's created, updated, or removed. Developers use them to set things up at the right time and to clean up afterwards so the app stays fast and leak-free.”
Code Example
import { Component, Input, OnChanges, OnInit, OnDestroy, SimpleChanges } from '@angular/core';
@Component({ selector: 'app-demo', template: '{{ title }}' })
export class DemoComponent implements OnChanges, OnInit, OnDestroy {
@Input() title = '';
ngOnChanges(changes: SimpleChanges) {
console.log('input changed', changes);
}
ngOnInit() {
console.log('component initialised once');
}
ngOnDestroy() {
console.log('cleanup before destroy');
}
}Follow-up Questions
- Why does ngOnChanges run before ngOnInit?
- What is the difference between ngAfterViewInit and ngAfterContentInit?
- Why should you unsubscribe in ngOnDestroy?
- When would you use ngDoCheck over ngOnChanges?
- Do lifecycle hooks fire for directives as well as components?
MCQ Practice
1. Which lifecycle hook runs first?
ngOnChanges runs first when there are data-bound inputs, before ngOnInit.
2. How many times does ngOnInit run for a component instance?
ngOnInit runs exactly once after the first ngOnChanges, making it ideal for one-time initialisation.
3. Which hook is best for cleaning up subscriptions?
ngOnDestroy runs just before the component is removed, the right place to unsubscribe and free resources.
Flash Cards
First lifecycle hook? — ngOnChanges (when inputs are bound), before ngOnInit.
How often does ngOnInit run? — Once, after the first ngOnChanges.
Where do you clean up subscriptions? — ngOnDestroy.
View vs content hooks? — Content hooks fire for projected content; view hooks fire when the component's own view is ready.