What are Lifecycle Hooks in Angular?
💡 Concept Name
Lifecycle Hooks – Special methods in Angular that allow you to tap into different phases of a component’s life, like initialization, change detection, and destruction.
📘 Quick Intro
Angular lifecycle hooks are callback methods that provide visibility into key moments in a component or directive’s life, such as when it’s created, updated, or destroyed. Common hooks include ngOnInit, ngOnChanges, and ngOnDestroy.
🧠 Analogy / Short Story
Think of a component like a plant. It gets planted (ngOnInit), grows and reacts to sunlight and water changes (ngOnChanges), and eventually gets trimmed or removed (ngOnDestroy). Lifecycle hooks are how Angular nurtures your component from seed to sunset.
🔧 Technical Explanation
ngOnInit(): Called once after the component is initialized—perfect for API calls or setup.ngOnChanges(): Called whenever input properties change.ngOnDestroy(): Called before the component is removed—used for cleanup.- Other hooks include
ngAfterViewInit,ngDoCheck,ngAfterContentInit, etc.
🎯 Purpose & Use Case
- ✅ Initialize data and make API calls using
ngOnInit - ✅ Detect and respond to input changes with
ngOnChanges - ✅ Perform cleanup (e.g., unsubscribe) in
ngOnDestroy - ✅ Hook into content or view child initialization
💻 Real Code Example
import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';
@Component({
selector: 'app-example',
template: '<p>Hello, {{name}}</p>'
})
export class ExampleComponent implements OnInit, OnChanges, OnDestroy {
@Input() name: string = '';
ngOnInit() {
console.log('Component initialized');
}
ngOnChanges() {
console.log('Input property changed');
}
ngOnDestroy() {
console.log('Component destroyed');
}
}
❓ Interview Q&A
Q1: What is ngOnInit used for?
A: It is used for component initialization, like fetching data or setting initial values.
Q2: When is ngOnDestroy called?
A: Before a component is removed from the DOM to perform cleanup tasks.
Q3: Which hook detects input property changes?
A: ngOnChanges
Q4: Can a component have multiple lifecycle hooks?
A: Yes, it can implement several lifecycle interfaces.
Q5: What happens if ngOnDestroy is not implemented?
A: Cleanup code like unsubscribing may be missed, leading to memory leaks.
📝 MCQs
Q1. Which lifecycle hook is called after the component's first display?
- ngOnChanges
- ngOnInit
- ngDoCheck
- ngAfterViewInit
Q2. Which lifecycle hook detects changes in @Input properties?
- ngAfterViewInit
- ngOnInit
- ngOnChanges
- ngOnDestroy
Q3. Which lifecycle method is used to unsubscribe from observables?
- ngOnInit
- ngAfterContentChecked
- ngOnDestroy
- ngDoCheck
Q4. What interface is implemented to use ngOnInit?
- OnStart
- OnInit
- InitHook
- StartComponent
Q5. What does ngOnDestroy help prevent?
- Null exceptions
- Slow rendering
- Memory leaks
- Change detection
Q6. When is ngOnChanges triggered?
- After initialization
- Before view loads
- When an @Input value changes
- During module load
Q7. Which hook runs only once during the component lifecycle?
- ngOnChanges
- ngDoCheck
- ngAfterViewInit
- ngOnInit
Q8. What is the purpose of ngAfterViewInit?
- Runs on input change
- Resets the state
- Detect changes after component view is initialized
- Destroy DOM
Q9. Can ngOnInit and ngOnDestroy exist together?
- Yes
- No
- Only in services
- Only in modules
Q10. What should be avoided inside ngOnDestroy?
- Cleanup logic
- Unsubscribe
- Heavy async operations
- Logging
💡 Bonus Insight
Always unsubscribe from observables and detach event listeners in ngOnDestroy to avoid memory leaks. Use tools like takeUntil() with Subject for efficient teardown.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!