If you're working with Angular, you've probably heard terms like
ngOnInit, ngOnDestroy, or maybe
ngAfterViewInit. These are part of what Angular calls the
Component Lifecycle – a series of events that happen from the
creation of a component to its destruction.
Think of it like this: a component is like a guest at a party. It arrives (is created), interacts (does some work), and eventually leaves (is destroyed). Angular gives us special lifecycle hooks so we can run code at specific stages of this "party".
Let’s explore the lifecycle in the order it happens 👇
🛠️ 1. ngOnChanges() – The Early Notifier
-
When it runs: Whenever an input property
(
@Input()) of the component changes. - Use it to: React to changes in data coming from a parent component.
ngOnChanges(changes: SimpleChanges) {
console.log('Input property changed:', changes);
}
🚀 2. ngOnInit() – Initialization Time!
- When it runs: Right after the component is created and inputs are set.
- Use it to: Fetch data, start timers, or initialize logic.
ngOnInit() {
console.log('Component initialized');
}
🔍 3. ngDoCheck() – Custom Change Detection
- When it runs: Every time Angular checks the component for changes.
- Use it to: Detect changes that Angular’s default detection might miss.
ngDoCheck() {
console.log('Change detection running');
}
🧱 4. ngAfterContentInit() – Content Ready
-
When it runs: After Angular projects external content into
the component (using
<ng-content>). - Use it to: Work with projected content.
ngAfterContentInit() {
console.log('Projected content initialized');
}
🧪 5. ngAfterContentChecked() – Content Checked
- When it runs: After every check of projected content.
- Use it to: Respond after content updates.
ngAfterContentChecked() {
console.log('Projected content checked');
}
🖼️ 6. ngAfterViewInit() – View Ready
- When it runs: After Angular initializes the component’s view and child views.
-
Use it to: Access view-related elements like
@ViewChild.
ngAfterViewInit() {
console.log('Component view initialized');
}
🔄 7. ngAfterViewChecked() – View Checked
- When it runs: After every check of the component’s view and child views.
- Use it to: Perform actions after the view updates.
ngAfterViewChecked() {
console.log('Component view checked');
}
🧹 8. ngOnDestroy() – Cleanup Time
- When it runs: Right before the component is removed from the DOM.
- Use it to: Clean up subscriptions, timers, or other resources.
ngOnDestroy() {
console.log('Component is being destroyed');
}
🎯 Summary Table
| Lifecycle Hook | When It Runs | Common Use Case |
|---|---|---|
ngOnChanges() |
On input property change | Respond to parent data changes |
ngOnInit() |
On component initialization | Fetch data, setup logic |
ngDoCheck() |
During every change detection cycle | Custom change detection |
ngAfterContentInit() |
After projecting content | Access projected content |
ngAfterContentChecked() |
After content check | Post-content-check logic |
ngAfterViewInit() |
After component’s view initialization | Access view elements |
ngAfterViewChecked() |
After view check | Post-view-check actions |
ngOnDestroy() |
Before component is destroyed | Cleanup subscriptions, resources |
🧠 Final Thoughts
Understanding the Angular component lifecycle gives you superpowers to control how your component behaves at every stage. Whether you're initializing data, tweaking the view, or cleaning up, there's a lifecycle hook waiting for you.
Next time you write a component, try adding a few of these hooks and log messages to see the flow in action. It’s fun, and you’ll learn a lot! 💡
0 Comments