Lifecycle Hooks

  • Allow us to perform custom logic at various stages of a component's life span
  • The most common use case is when data isn't immediately available in the constructor
  • Implemented as class methods on the component class
  • Should not be called directly except when writing unit tests
  • The lifecycle interfaces are optional. We recommend adding them to benefit from TypeScript's strong typing and editor tooling
  • ngOnChanges called when an input or output binding value changes
  • ngOnInit called after the first ngOnChanges
  • ngDoCheck handles developer's custom change detection
  • ngAfterContentInit called after component content initialized
  • ngAfterContentChecked called after every check of component content
  • ngAfterViewInit called after component's view(s) are initialized
  • ngAfterViewChecked called after every check of a component's view(s)
  • ngOnDestroy called just before the directive is destroyed.

Lifecycle Hooks Order

These lifecycle hooks are implicitly called. They should simply exist to delegate to some other functionality.