LifeCycle hooks in Angular

  • ngOnChanges
    • If a new component is create in Angular and if angular is responsible to create the component then ngOnChanges() method is called.
    • This lifecycle hook is also called when the value of variable decorated with @Input decorator changes.
  • ngOnInit
    • This lifecycle hook calls methos ngOnInit() and it is called when a component is initialized.
    • It does not mean the component has been rendered into the DOM but only means the object has been initialized.
    • ngOnInit() method is called after the constructor of that class.
  • ngDoCheck
    • This lifecycle hooks will run multiple times.
    • This method will be called whenever change detection runs.
    • In run when every there is a change on the DOM like a button press
  • ngAfterContentInit
    • This lifecycle hook is called whenever the content of ng-content has been projected into the view.
  • ngAfterContentChecked
    • Called when change detection happens to ng-content in our component.
  • ngAfterViewInit
    • Called when the view of the component has been finished initialising.(View has been rendered)
  • ngAfterViewChecked
    • Called when all the changes detected by change detection has been completed.
    • Or even when no changes has been detected in our component by change detector.
  • ngOnDestroy
    • Called once the component is about to be destroyed.
    • Best place to do the cleanup work

Leave a Comment