Angular Lifecycle Hooks

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.

Comments

[Emre AKA]

Thanks!