What are the lifecycle hooks in Angular? Example

In Angular, lifecycle hooks are methods that are called at different stages of a component's life cycle. These hooks allow you to perform specific actions or implement custom logic at certain moments during the component's creation, rendering, and destruction. Understanding these lifecycle hooks is essential for managing component behavior and interacting with Angular's internal processes. Let's explore the various lifecycle hooks available in Angular:

1. ngOnChanges(): This hook is called when the component receives input properties from its parent component or when the value of an input property changes.
It receives a SimpleChanges object as a parameter, which contains the previous and current values of the input properties.

2. ngOnInit(): This hook is called after the component's constructor and ngOnChanges() have been called for the first time.
It is commonly used for initialization tasks, such as retrieving data from a backend service or setting up subscriptions.

3. ngDoCheck(): This hook is called during every change detection cycle, allowing you to implement custom change detection logic.It is invoked after ngOnChanges() and ngOnInit().
Caution: Use this hook judiciously, as it can impact performance if not used correctly.

4. ngAfterContentInit(): This hook is called after Angular projects external content into the component's view. It is primarily used when a component has <ng-content> tags in its template, allowing you to access and manipulate the projected content.

5. ngAfterContentChecked(): This hook is called after Angular checks the content projected into the component. It is called whenever the content changes or when the change detection cycle runs.

6. ngAfterViewInit(): This hook is called after Angular initializes the component's views and child views. It is commonly used for operations that require access to the component's rendered view, such as manipulating the DOM or interacting with child components.

7. ngAfterViewChecked(): This hook is called after Angular checks the component's views and child views.It is called whenever the view or child view changes or when the change detection cycle runs.

8. ngOnDestroy(): This hook is called just before the component is destroyed and removed from the DOM.It is used to clean up resources, such as unsubscribing from subscriptions, cancelling timers, or freeing up memory.

Here's an example to illustrate the usage of Angular's lifecycle hooks:

typescript
mport { Component, Input, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-lifecycle-example',
  template: `
    <h2>Component Lifecycle Example</h2>
    <p>Current Value: {{ value }}</p>
  `
})
export class LifecycleExampleComponent implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() value: string;

  constructor() {
    console.log('Constructor called');
  }

  ngOnChanges() {
    console.log('ngOnChanges called');
  }

  ngOnInit() {
    console.log('ngOnInit called');
  }

  ngDoCheck() {
    console.log('ngDoCheck called');
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit called');
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked called');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit called');
  }

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked called');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy called');
  }
}

In this example, we have a LifecycleExampleComponent that implements several lifecycle hooks. The component has an input property value, and in the template, we display the current value.

When the component is used in another component's template and the value of value changes, the lifecycle hooks will be called in the following order:

1. ngOnChanges: Called when the input property changes.
2. ngOnInit: Called after the component is initialized.
3. ngDoCheck: Called during every change detection cycle.
4. ngAfterContentInit: Called after the component's content is initialized.
5. ngAfterContentChecked: Called after the component's content has been checked.
6. ngAfterViewInit: Called after the component's view is initialized.
7. ngAfterViewChecked: Called after the component's view has been checked.
8. If the component is destroyed, the ngOnDestroy hook will be called.

By running this example and observing the console logs, you can see the sequence of the lifecycle hooks being executed based on the component's lifecycle events and property changes.

sample output
Constructor called
ngOnChanges called
ngOnInit called
ngDoCheck called
ngAfterContentInit called
ngAfterContentChecked called
ngAfterViewInit called
ngAfterViewChecked called

By implementing these lifecycle hooks in your Angular components, you can perform actions at specific moments and control the component's behavior throughout its lifecycle. It is important to leverage the appropriate hooks for initialization, data retrieval, cleanup, and other tasks, ensuring efficient and well-structured component management.