Lifecycle Hooks
Angular lifecycle hooks let you run code at specific moments in a component's life.
Lifecycle hooks are methods that Angular calls at specific moments during a component's life — from creation to destruction.
"Lifecycle = insaan ki life — paida hua, badla, mara — har stage pe kuch karna hota hai."
Angular provides several hooks. Some are called once (creation), some multiple times (change detection), and one is called at the end (destruction).
To get TypeScript support, use implements:
export class MyComponent implements OnInit, OnDestroy {\n ngOnInit() { ... }\n ngOnDestroy() { ... }\n}These hooks run once when the component is created:
constructor() — This is NOT an Angular hook, it's a TypeScript/JavaScript class constructor. It runs first, but Angular isn't fully ready yet. Use it only for simple dependency injection.
constructor(private service: DataService) { // ✅ Only DI here\n // ❌ Don't call APIs here!\n}ngOnInit() — This is the FIRST Angular lifecycle hook. Angular has finished setting up the component — inputs are resolved, DI is ready. This is where you initialize data, call APIs, and set up your component.
ngOnInit() {\n this.loadData(); // ✅ Call APIs here\n this.setupForm(); // ✅ Setup forms\n this.observeChanges(); // ✅ Setup observers\n}"Constructor = hospital mein janam, ngOnInit = ghar aake settle hona."
Rule of thumb: Keep your constructor empty. Put all initialization logic in ngOnInit.
These hooks run multiple times during change detection cycles:
- ngDoCheck() — Called during every change detection run. Very rarely used. Can hurt performance.
- ngAfterContentInit() — Called once after ng-content has been projected. Use if you need to know when projected content is ready.
- ngAfterContentChecked() — Called after EVERY check of projected content. Runs frequently.
- ngAfterViewInit() — Called once after component's view (template) is fully initialized. DOM elements are accessible here!
- ngAfterViewChecked() — Called after EVERY check of the component's view. Runs frequently.
"View hooks = template ready ho gaya — ab DOM access kar sakte ho."
⚠️ WARNING: Don't set values in ngAfterViewInit that could trigger another change detection — this causes the "ExpressionChangedAfterItHasBeenCheckedError" error.
ngOnDestroy() — Called once when the component is about to be destroyed and removed from the DOM.
ngOnDestroy() {\n this.subscription.unsubscribe(); // 🧹 Stop subscriptions\n clearInterval(this.timer); // ⏰ Clear timers\n this.cleanupListener(); // 🔌 Remove event listeners\n}"ngOnDestroy = packing before leaving rented house — sab saaf karo."
This is CRITICAL. If you don't clean up here, you'll get memory leaks that slow down your app over time. Always unsubscribe from observables, clear intervals, and remove event listeners.
In real Angular projects, only 3 hooks are used most of the time:
- ngOnInit — Used in ~90% of components. API calls, initial data loading, form setup.
- ngOnDestroy — Used in ~70% of components. Unsubscribe, clean up, prevent memory leaks.
- ngAfterViewInit — Used in ~20% of components. DOM access for chart libraries, third-party integrations.
The other hooks exist for advanced use cases. Know they exist, but you'll rarely need them.
"Real life mein sirf 3 hooks ka kaam chalta hai bhai." Focus on mastering ngOnInit, ngOnDestroy, and ngAfterViewInit.
Key Takeaways
- ✅ Lifecycle hooks are methods Angular calls at specific moments in a component's life.
- ✅ ngOnInit is for initialization (API calls, setup). Keep constructor empty.
- ✅ ngOnDestroy is for cleanup (unsubscribe, clear intervals, remove listeners).
- ✅ ngAfterViewInit gives access to DOM elements after template is ready.
- ✅ In real projects, 90% of the time you only need ngOnInit, ngOnDestroy, and ngAfterViewInit.
Want to track your progress?
Log in to save your place and pick up where you left off.
Progress track karna chahte ho?
Login karo apni progress save karne ke liye aur jahan chhoda tha wahan se shuru karo.
Login