Lifecycle hooks in Angular

In Angular, lifecycle hooks are methods that provide visibility into the lifecycle of components and directives. These hooks allow you to perform actions at specific points in the lifecycle of a component or directive. Here are some of the most commonly used lifecycle hooks in Angular:

1. ngOnChanges()

• Called before ngOnInit() (if the component has bound inputs) and whenever one or more data-bound input properties change.
• Receives a SimpleChanges object that contains the previous and current values of the input properties.

2. ngOnInit()

• Called once, after the first ngOnChanges(). ngOnInit() is still called even when ngOnChanges() is not (which is the case when there are no template-bound inputs).
• It is a good place to perform component initialization logic.

3. ngDoCheck()

• Called immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run.
• It allows you to implement your own change detection logic.

4. ngAfterContentInit()

• Called after Angular projects external content into the component’s view,(or you can say component’s content has been initialized) or into the view that a directive is in and once after the first ngDoCheck() .
• It is a good place to perform initialization that relies on content.

5. ngAfterContentChecked()

• Called after ngAfterContentInit() and every subsequent ngDoCheck().
• It is a good place to perform checks or operations after content has been checked.

6. ngAfterViewInit

• Called once after the component’s view has been initialized and after the first ngAfterContentChecked().
• It is a good place to perform initialization that relies on the view.

7. ngAfterViewChecked

• Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
• It is a good place to perform checks or operations after the view has been checked.

8. ngOnDestroy

• Called just before the component is destroyed.
• It is a good place to perform cleanup tasks and unsubscribe from observables.

Here is an example of how these hooks can be implemented in a component:

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

@Component({
  selector: 'app-lifecycle-example',
  template: `
    <!-- Your component template here -->
  `
})
export class LifecycleExampleComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit, AfterViewChecked {

  // Input property
  @Input() data: any;

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // Called whenever an input property of the component changes.
  }

  ngOnInit() {
    // Called once after the component is initialized, and after the first ngOnChanges().
  }
  
  ngDoCheck() {
    // Called immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run.
  }

  ngAfterContentInit() {
    // Called once after the first ngDoCheck().
    // Respond after Angular projects external content into the component's view, or into the view that a directive is in.
  }

  ngAfterContentChecked() {
    // Called after ngAfterContentInit() and every subsequent ngDoCheck().
  }

  ngAfterViewInit() {
    // Called once after the component's view has been initialized and after the first ngAfterContentChecked().
  }

  ngAfterViewChecked() {
    // Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
  }

  ngOnDestroy() {
    // Called just before Angular destroys the directive or component.
  }
}

Each hook serves a specific purpose, and you can implement the ones that are relevant to your component’s requirements. Understanding the lifecycle hooks is crucial for effective component management and ensuring that your application behaves as expected throughout its lifecycle.