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
Angular Lifecycle hooks
By Enrique Oriol
Angular Lifecycle hooks
- 37,449
