Angular Component Lifetime

In Angular, each component has it’s lifetime which is internally managed by Angular.
Component lifetime consists of sequence of events, that are fired one by one, in specific order. These events are reffered to “Lifecycle Hooks”. They allow to control the component by giving possibility to perform some actions when any lifecycle hook event occurs.
There are eight different hooks:

  • ngOnChanges – this method is called at the beginning of component lifetime, before ngOnInit and during any data-bound input property change. It receives SimpleChanges object that provides information about current and previous property values.
  • ngOnInit – called once, after ngOnChanges, when component has been initialized.
  • ngDoCheck – method that is called after each change detection.
  • ngAfterContentInit – fired only once after first ngDoCheck call, when initialization of all content projection into the components view has been completed.
  • ngAfterContentChecked – invoked each time component content has been checked. Called after ngAfterContentIni and ngDoCheck.
  • ngAfterViewInit – this method is called once, after ngAfterContentChecked, when component view and it’s children views has been initialized.
  • ngAfterViewChecked – invoked after ngAfterViewInit and ngAfterContentChecked, when component view and child view has been checked by the change detection mechanism.
  • ngOnDestroy – invoked just before destruction of the component.

Leave a Reply

Your email address will not be published. Required fields are marked *