Angular Lifecycle Hooks
Tags: angular, programming
Published: 2022-01-31 13:33:27

Angular lifecycle hooks expose lots of events so developers can define the custom initialization of components.

First create a new angular app.

`ng new life-cycle-demo`

Create the components :
`ng g c cmponents/parent`
`ng g c cmponents/children`

In the parent.componet.html template paste the ng-content 
`<ng-content></ng-content>`

In the **children.component.html** we want to define an event which chnages a property value of a children component
`<button (click)="changeText()">Change property value</button>`

In the **parent.component.ts** 

```
export class ParentComponent implements OnChanges,
  OnInit,
  DoCheck,
  AfterContentInit,
  AfterContentChecked,
  AfterViewInit,
  AfterViewChecked {

  constructor() { }

  ngDoCheck(): void {
    console.log("Parent : ngDoCheck()")
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("Parent : ngOnChanges")
  }

  ngAfterViewChecked(): void {
    console.log("Parent : ngAfterViewChecked()")
  }

  ngAfterViewInit(): void {
    console.log('Parent: ngAfterViewInit()')
  }

  ngAfterContentChecked(): void {
    console.log('Parent: ngAfterContentChecked()')
  }

  ngAfterContentInit(): void {
    console.log('Parent: ngAfterContentInit()')
  }

  ngOnInit(): void {
    console.log('Parent: ngOnInit() ')
  }

}
```
The intrefaces has to be implemented in the **children.compoent.ts**

```
export class ChildrenComponent implements OnInit,
  OnChanges,
  DoCheck,
  AfterContentInit,
  AfterContentChecked,
  AfterViewInit,
  AfterViewChecked {

  componentProperty: string = '';

  constructor() { }

  ngDoCheck(): void {
    console.log('Children ngDoCheck()')
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Children ngDoCheck()')
  }

  ngAfterViewChecked(): void {
    console.log('Children ngAfterViewChecked')
  }

  ngAfterViewInit(): void {
    console.log('Children ngAfterViewInit()')
  }

  ngAfterContentChecked(): void {
    console.log('Children ngAfterContentChecked()')
  }

  ngAfterContentInit(): void {
    console.log('Children ngAfterContentInit()')
  }

  ngOnInit(): void {
    console.log('Children ngOnInit()')
  }

  changeText() {
    this.componentProperty = "text changed"
  }

}
```
In the **app.component.html** 

```
<app-parent>
  <app-children></app-children>
</app-parent>
```

The expected output
Parent: ngOnInit() 
Parent : ngDoCheck()
Children ngOnInit()
Children ngDoCheck()
Children ngAfterContentInit()
Children ngAfterContentChecked()
Parent: ngAfterContentInit()
Parent: ngAfterContentChecked()
Children ngAfterViewInit()
Children ngAfterViewChecked
Parent: ngAfterViewInit()
Parent : ngAfterViewChecked()

Parent : ngDoCheck()
Children ngDoCheck()
Children ngAfterContentChecked()
Parent: ngAfterContentChecked()
Children ngAfterViewChecked
Parent : ngAfterViewChecked()

If we triger the action from the Children component the 


Parent: ngDoCheck, 
Children: ngDoCheck, 
Children ngAfterContentChecked(), 
Parent ngAfterContentChecked(), 
Children ngAfterViewChecked, 
Parent ngAfterViewChecked

will execute in order.


There is one action that was not listed which is the **OnDestroy** this executes the last in the order. Normally Programmers use this to clean up resources like Prmoise or  Subscriptions.


The most pupular actions are **OnDestroy and OnInit**. 

**OnInit** runs when a component has fully initialized the developer also can have access to injected properties and it executes only once, and OnChnages and DoCheck execute every change detection. Therefore expensive, heavy code like HTTP calls are placed in the OnInit action.