Angular lifecycle hooks diagram | angular lifecycle diagram

Subodh AngularThink

Angular18 Latest angular lifecycle hooks diagram


Introduction:

Angular lifecycle hooks allow us developers to execute code defined at specific stages of a component's lifecycle. By developers understanding and utilizing these lifecycle hooks effectively in your applications, you can also enhance the performance and functionality of your Angular applications. 
In this article, we will explore the various Angular lifecycle hooks, explain their purposes, and provide practical examples to help you understand and utilize these lifecycle hooks effectively in your applications also briefly discuss the Angular lifecycle hooks flow diagram with step-by-step examples.



angular lifecycle diagram

Constructor Lifecycle Hook in Angular :

Constructor is one type of class that component, Before the component Lifecycle Hook starts first executing the Constructor, Angular lifecycle hooks play a crucial role in controlling the behavior and functionality of components at various stages of their lifecycle. Among these hooks, the constructor is one of the fundamental hooks that every Angular developer should understand. 

The constructor also plays an important role lifecycle hook in Angular, The fundamental role is in initializing components, setting up their properties, and injecting dependencies. It is called only once during the component's lifecycle, at the time of instantiation.


Angular Lifecycle Hooks Flow Diagram :

Angular lifecycle hooks that allow developers to execute code at specific stages of a component's lifecycle. By understanding and utilizing these Angular lifecycle hooks effectively understand to develop a flow diagram.

angular lifecycle hooks diagram -

Angular16 Latest angular lifecycle hooks diagram

  • Angular lifecycle hooks with an example :

1) ngOnChanges:  [Reacting to Input Changes]

The ngOnChanges hook is invoked whenever an input property of a component changes. It receives a SimpleChanges object containing previous and current values of the input properties.

Angular lifecycle hooks It works before the ngOnInit, It is called whenever the input value changes that time this method can execute.

Example:


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

@Component({
  selector: 'app-angular-think',
  template: '{{ value }}',
})
export class AngularThinkComponent implements OnChanges {
  @Input() value: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.value) {
      console.log('Value changed:', changes.value.currentValue);
    }
  }
}


2)ngOnInit: [Initializing Component State]

The Angular lifecycle hooks ngOnInit hook is called once, immediately after the component is initialized and its input properties have been set.
The ngOnInit is mostly used for initializing data or making API calls.

Example:

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

@Component({
  selector: 'app-angular-think',
  template: 'Initialized!',
})
export class AngularThinkComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized');
    // Perform initialization tasks here
  }
}


3)ngDoCheck: [Manually Detecting Changes]

Angular lifecycle hooks The ngDoCheck hook is invoked during every change detection cycle. The ngDoCheck allows you to implement custom change detection logic to the component. 

Example :


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

@Component({
  selector: 'app-angular-think',
  template: '{{ value }}',
})
export class AngularThinkComponent implements DoCheck {
  value: string;

  ngDoCheck() {
    if (this.value === 'OpenAI') {
      console.log('Value changed to OpenAI');
    }
  }
}


4)ngAfterContentInit : [Dealing with Content Projection]

These hooks are triggered after Angular projects external content into the component's view, such as transcluded content or projected content. 
The ngAfterContentInit can be used for interacting with the component's projected content.

It is called only once after the first ngDoCheck, It is called after the first run-through initializing content.


5)ngAfterContentChecked :

It is called after the ngDoChecked, It waits till after ngAfterContentInit() on the first run through They can be used for interacting with the component's projected content

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

@Component({
  selector: 'app-angular-think',
  template: `
    <ng-content></ng-content>
  `,
})
export class AngularThinkComponent implements AfterContentInit, AfterContentChecked {
  ngAfterContentInit() {
    console.log('Content initialized');
  }

  ngAfterContentChecked() {
    console.log('Content checked');
  }
}


6)ngAfterViewInit:[Manipulating the DOM]

The ngAfterViewInit Angular lifecycle hooks are called once, immediately after a component's view has been initialized. 
The ngAfterViewInit is the ideal spot to perform errands that expect admittance to the part's view, for example, controlling the DOM or associating with child components. Consider the following 

Example:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-angular-think',
  template: '<div #myDiv>Initial Content</div>',
})
export class AngularThinkComponent implements AfterViewInit {
  @ViewChild('myDiv', { static: false }) myDiv: ElementRef;

  ngAfterViewInit() {
    console.log('View initialized');
    // Access and manipulate the DOM element
    this.myDiv.nativeElement.textContent = 'Updated Content';
  }
}


In this example, we use the @ViewChild decorator to access the myDiv element in the component's template. The ngAfterViewInit hook allows us to modify the content of the myDiv element after it has been rendered.

7)ngAfterViewChecked:

The ngAfterViewChecked hook is called after every change detection cycle when the component's view has been checked. 
The ngAfterViewChecked is most useful for performing additional actions on the view based on changes in the component or its child components. 

Let's explore an example:

It first call ngAfterViewInit(), It was called after all the content was initialized and checked the parent & child components.

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

@Component({
  selector: 'app-angular-think',
  template: '<div>{{ value }}</div>',
})
export class AngularThinkComponent implements AfterViewChecked {
  value: string;

  ngAfterViewChecked() {
    console.log('View checked');
    // Perform additional actions based on view changes
    if (this.value === 'OpenAI') {
      // Do something specific
    }
  }
}


8)ngOnDestroy: [Cleaning up Resources]

The ngOnDestroy hook is called just before the component is destroyed. Angular lifecycle hooks It is used for cleanup tasks such as unsubscribing from observables or releasing resources. 
used to clean up necessary code when components remove DOM before being called only once.

Example:

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

@Component({
  selector: 'app-angula-think',
  template: 'Component',
})
export class AngularThinkComponent implements OnDestroy {
  private subscription: Subscription;

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

  ngOnDestroy() {
    console.log('Component destroyed');
    this.subscription.unsubscribe();
  }
}



Conclusion:

In this blog, you Comprehend Angular lifecycle hooks play a significant part in growing top-notch applications. By utilizing this these hooks on your Applications, you have some control over the way of behaving of your parts at different stages and guarantee productive execution.

In this article, we must investigate exclusive lifecycle hooks and supply reasonable Angular lifecycle hooks guides to showcase their use. Angular lifecycle hooks that permit builders to execute code at specific degrees of a factor's lifecycle. By understanding and utilizing these lifecycle hooks successfully recognize to broaden angular lifecycle hooks diagram  use this knowledge to optimize and also be helpful to all Developers.

FAQ

1)Why do we use lifecycle hooks?
Ans - lifecycle hooks assist us manage thing behavior and carry out vital moves at the right time. They offer a dependent way to respond to distinct lifecycle events, ensuring that our additives are nicely initialized, up to date, and wiped clean up. By way of leveraging these hooks, we are able to enhance the capability, overall performance, and reliability of our angular applications. 

2)What is the difference between constructor and ngOnInit?
Ans - Constructor is used to initialize the class of That component. The constructor is responsible for basic object initialization, while ngOnInit is used for more specialized initialization tasks specific to the component's view. The constructor is called first during object creation, whereas ngOnInit is called after the constructor and is used for initializing component-specific view-related tasks. read more

3)Why constructor is called first in Angular?
Ans- The constructor is called to initialize the class of the component. The constructor is called first in Angular to initialize the component or service, set up its properties, and inject any dependencies it requires before it can be used, The constructor is called before ngOnInit. 

4)What are lifecycle hooks in Angular? 

Ans - Angular manages components and directives for us when it creates life cycle hooks, updates them, or destroys them. lifecycle hook provides a specified amount of time to wait for the Flow of steps completed before the instance transitions to the next state.


0 Comments