Angular Lifecycle Hooks

Angular Lifecycle Hooks (Experiment Only)

Each component or directive has following life cycle and it is managed by Angular

  • ngOnChanges()
  • ngOnInit()
  • ngDoCheck()
  • ngAfterContentInit()
  • ngAfterContentChecked()
  • ngAfterViewInit()
  • ngAfterViewChecked()
  • ngOnDestroy()

Component lifecycle hooks

Component instances have a lifecycle as Angular creates, updates, and destroys them. Developers can handle it using interface implementation.


ngOnChanges()

on changes is a lifecycle hook that is called when any data-bound property of a directive changes. on changes is an interface that has a method declaration as below

ngOnChanges(changes: SimpleChanges) 


Have to import

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

When we used @Input() data-bound property in child component. If the @Input() references changed by the parent, then ngOnChanges() method is called.

Ex Source @StackBlitz


ngOnInit()

Called Once, After the 1st call of ngOnChanges()
Ex Source @StackBlitz



Output from Console:



ngDoCheck()

Called during every changes, after ngOnChanges() and ngOnInit().

Ex Source @StackBlitz


output from console: 

ngAfterContentInit()

Called once after the first ngDoCheck()



Ex Source @StackBlitz


output from console:

ngAfterContentChecked()

Called after the ngAfterContentInit() and every subsequent ngDoCheck()

Ex Source @StackBlitz

 output from console:


ngAfterViewInit()

Called once after the first ngAfterContentChecked().
Ex Source @StackBlitz

 output from console: 

ngAfterViewChecked()

Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().
Ex Source @StackBlitz

output from console

ngOnDestroy()

Called just before Angular Dispose's the directive/component. try to navigate b/w component one & component 2.

 the output from console:


Your browser does not support iframes.
Angular Lifecycle Hooks Angular Lifecycle Hooks Reviewed by interfacecreator on 11:37:00 AM Rating: 5

No comments:

Powered by Blogger.