Angular -- Lifecycle Hooks

Angular Doc Link

ngOnChange

Invoked first time before ngOnInit AND whenever the data-bound input properties changes

• data-bound input: some data coming from outside components (parent component)
  • Uses "SimpleChange" object to keep track of current and past values

ngOnInit

Invoked when the component is initialized, called only once after the first ngOnChanges

• Good for initializations

ngDoCheck

called first time after ngOnInit and whenever after ngOnChanges, used to detect and act on custom changes that cannot be detected by Angular

ngAfterContentInit

It gets called only once after the first ngDoCheck hook. Handle the external data when it has just been projected into the component.

ngAfterContentChecked

It gets called first time after ngAfterContentInit and whenever ngDoCheck is called. Handles data after Angular checks for external data projection.

ngAfterViewInit

Invoked only once after the first ngAfterContentChecked() -- after Angular initializes the component's views and child views, or the view that contains the directive.

ngAfterViewChecked( ) It gets called first time after ngAfterViewInit, and whenever ngAfterContentChecked(). It responds after the component's view, or the child component's view is checked.

ngOnDestroy

Invoked only once when the component is destroyed

• Good for clean-up logic