Component Lifecycle in Angular Explained

Understanding the Angular Component Lifecycle

If you’re building applications with Angular, understanding the component lifecycle is crucial. Lifecycle hooks provide insight and control over how Angular components are created, rendered, updated, and destroyed. Mastering these hooks helps you write more predictable and powerful apps.

What Is a Component Lifecycle?

Every Angular component goes through a defined series of steps from creation to removal: Instantiation, change detection, view rendering, and destruction. Angular provides lifecycle hooks—special methods—that let you tap into those moments and perform custom logic.

Major Lifecycle Hooks in Angular

• ngOnInit(): Invoked once after the first ngOnChanges(). Used for component initialization.
• ngOnChanges(): Called whenever data-bound input properties change.
• ngDoCheck(): Used to detect and act upon changes that Angular can’t or won’t detect on its own.
• ngAfterContentInit() & ngAfterContentChecked(): Deal with projected content (via <ng-content>).
• ngAfterViewInit() & ngAfterViewChecked(): Focused on component’s view and its children after rendering.
• ngOnDestroy(): Called just before Angular destroys the component.

Lifecycle Hook Example

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: '
Demo works!
'
})
export class DemoComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component Initialized');
  }
  ngOnDestroy() {
    console.log('Component about to be destroyed');
  }
}

Lifecycle Hook Order

Hooks are called in a specific order. Here’s the typical sequence:

1. ngOnChanges() (if there are bound inputs)
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. On update: ngDoCheck() → ngAfterContentChecked() → ngAfterViewChecked()
9. ngOnDestroy()

When to Use Each Lifecycle Hook

• ngOnInit(): For initialization logic, API calls, or setting up your component after bindings.
• ngOnChanges(): Useful when you need to react as @Input properties change.
• ngOnDestroy(): For cleanup—unsubscribe from observables, remove event listeners, or clear intervals.
• AfterView/Content Hooks: Interact with view and projected content after they are initialized or checked.

Tips for Working with Lifecycle Hooks

• Keep your hook methods focused; don’t overload them with logic.
• Remember to always unsubscribe from observables in ngOnDestroy() to prevent memory leaks.
• Understand the timing: e.g., you can’t access view children in ngOnInit(), use ngAfterViewInit() instead.

Conclusion

The Angular component lifecycle offers a solid structure for building and maintaining web applications. Understanding and using lifecycle hooks effectively allows you to manage resources, optimize performance, and build scalable, maintainable code.