Angular Life Cycle Hooks

Angular lifecycle hooks are methods that are called at different stages of a component or directive's life cycle. These hooks allow you to perform actions at specific points in the life cycle, such as when the component is initialized or destroyed.

Here are some of the commonly used lifecycle hooks in Angular:

ngOnChanges: This hook is called whenever one or more input properties of the component change. You can use it to react to changes and update the component's state accordingly. Here's an example:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements OnChanges {
  @Input() name: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

In this example, the UserComponent has an @Input property called name. The ngOnChanges hook logs the changes to the console whenever the name property changes.

ngOnInit: This hook is called when the component is initialized after the first ngOnChanges call. You can use it to perform any initialization logic for the component. Here's an example:

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

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements OnInit {
  name: string;

  ngOnInit() {
    this.name = 'John';
  }
}

In this example, the UserComponent sets the name property to 'John' in the ngOnInit hook.

ngDoCheck: This hook is called whenever Angular detects a change that may not have been detected by the other lifecycle hooks. You can use it to perform custom change detection logic for the component. Here's an example:

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

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements DoCheck {
  name: string;

  ngDoCheck() {
    // Perform custom change detection logic
  }
}

In this example, the UserComponent implements the ngDoCheck hook to perform custom change detection logic.

ngOnDestroy: This hook is called just before the component is destroyed. You can use it to perform any cleanup logic for the component, such as unsubscribing from observables or releasing resources. Here's an example:

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

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements OnDestroy {
  name: string;
  subscription: Subscription;

  constructor() {
    this.subscription = someObservable.subscribe();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

In this example, the UserComponent unsubscribes from an observable in the ngOnDestroy hook to avoid memory leaks.

These are just a few examples of how you can use Angular lifecycle hooks to perform custom logic at different stages of a component's life cycle.

Thanks for Reading 😊