Angular Lifecycle Hooks

Angular wants to create your component

Constructor

Called when Angular (re)sets data-bound input properties

Constructor

OnChanges

Called to initialize the directive or component

Constructor

OnChanges

OnInit

DoCheck is called during every change detection run, to act upon changes

Constructor

OnChanges

OnInit

DoCheck

Called once after external content is projected (ng-content)

Constructor

OnChanges

OnInit

DoCheck

AfterContentInit

Constructor

Called after Angular checks the projected content (ng-content)

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

Constructor

Called after Angular initializes the component's views and child views

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

Constructor

Called after Angular checks the component's views and child views

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Change detection cycle

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

Constructor

Called just before Angular destroys the directive / component

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

OnDestroy

Constructor

Angular component entire lifecycle sequence

OnChanges

OnInit

DoCheck

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked

OnDestroy