3.1: Overview

When a new component is created in Angular, it goes through a couple of phases during its creation. These phases are can be accessed through what Angular calls lifecycle hooks. By tapping into these hooks, we have the ability to act upon them when they occur.

The lifecycle hooks are:

  • ngOnChanges - Called after a bound input property changes

  • ngOnInit - Called once the component is initialized

  • ngDoCheck - Called during every change detection run

  • ngAfterContentInit - Called after content (ng-content) has been projected into view

  • ngAfterContentChecked - Called every time the projected content has been checked

  • ngafterviewInit - Called after the component's view(and child views) has been initialized

  • ngAfterViewChecked - called every time the view (and the child views) have been checked

  • ngOnDestroy - Called once the component is ab about to be destroyed

Last updated