Life Cycle Method In Angular

In this article, we will discuss the Life Cycle Methods of Angular. If a user can understand the entire process of the components create and destroy the application.

What is the Life Cycle Method?

• Every Component has a LifeCycle.
• It goes through a number of different stages of Initializing and destroying.
• There is a total of 8 stages in the life cycle.
• Each and every stage call the life cycle hook event.
• If you can use hook in different phases in our application to obtain fine control.
• Each component contain Typescript class.
• Each Component has the constructor method.
• Constructor component class execute first before executing the life cycle hook.
• After executing the constructor. execute the life cycle hook method in a specific order.

Life Cycle Methods :

1. Constructor
2. ngOnChanges
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

1)  ngOnChanges

• This event executes every time value of the input control within the component has been changing.

2) ngOnInit

• This event Execute after ngOnChanges. mainly used in initializing data in the component.

3) ngDoCheck

• Input property of the component has been checked then this event is executed. you can also implement your check login to the property to be checked.

4) ngAfterContentInit

• This event execute angular performed any content projection with a component view. this event executes the first time for every binding of the component check to the first time. this event is a child of the ngDoCheck. every time this method is executed then after ngDoCheck.

5) ngAfterContentChecked

• This event executes after the execution of ngAfterContentInit. this event call content of the component is checked by the changes mechanism of the Angular. this method is also linked with every child component initialization. this method also calls every subsequent execution of ngDoCheck().

6) ngAfterViewInit

• This event executes after the Every Components view and child view have been initialized. it call first time after ngAfterContentChecked(). this method only applies to components.

7) ngAfterViewChecked

• This method call after ngAfterViewInit() method. this event executes every time the view of the given component has been checked by the change detection algorithm of Angular. this method executes every subsequence execution of the ngAfterContentChecked(). this method is also executed when any binding of children directives has been changed. this method is useful for the component wait for some value is coming from its child component.

8) ngOnDestroy

• This method will be executed after all Angular Component has been destroyed. this method avoids the memory leaks for the event observables and subscribes. this method call just one before the component has been removed from the DOM.

Example:

Step1: Create New Application.

• ng new Demo
• cd Demo

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit,OnChanges,OnDestroy 
{
  constructor()
  {
    console.log("Contructor");
  }
  ngOnChanges()
  {
    console.log("ngOnChnages");
  }
  ngOnInit(): void 
  {
    console.log("ngOnInit");
  }
  ngDoCheck()
  {
    console.log("ngDoCheck");
  }
  ngAfterContentInit()
  {
    console.log("ngAfterContentInit");
  }
  ngAfterContentChecked()
  {
    console.log("ngAfterContentChecked");
  }
  ngAfterViewInit()
  {
    console.log("ngAfterViewInit");
  }
  ngAfterViewChecked()
  {
    console.log("ngAfterViewChecked");
  }
  ngOnDestroy()
  {
    console.log("ngOnDestroy");
  }
  title = 'demo';
}

see output: