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.
Top comments (0)