Lifecycle hooks of an Angular Component

The following are the lifecycle hooks of an Angular component/directive. These life cycle hooks are executed in the order listed below.

ngOnChanges: This lifecycle hook method is executed when any of the components data-bound input properties are changed. i.e when the parent component changes the value of any of the @Input property declared in the component this hook gets executed. This lifecycle hook method gets a SimpleChanges object as parameter which contains the previous and current values of the property.

ngOnInt: This lifecycle hook is executed when the component is initialized, this event can be used to initialize data required by the component. The most common use of this event is to make ajax/api calls to fetch data required to be populated in the component. We can also use this event to initialize properties of the component. This hook gets executed after ngOnChanges() and before any child components are initialized.

ngDoCheck: This lifecycle hook gets executed when Angular runs the change detection process which is similar to the watch cycles in AngularJS. ngOnChanges also gets executed when changes are detected the difference is that ngOnChanges() detects changes for those properties which are passed by value. ngDoCheck() detects changes for those properties also which are passed by reference such as arrays.

For performance reasons OnChanges does not fire when the input property is an array/object, in these cases we can use ngDoCheck to perform our own custom change detection.

Notice that Angular calls ngDoCheck hook very frequently, for every keystroke, mouse movement etc.. This hook is called after every change detection cycle no matter where the change has occurred. It is advisable to keep the implementation of ngDocheck simple and lightweight.

ngAfterContentInit: This lifecycle hook gets executed after the component content is initialized, this hook is executed only once after the execution of ngDoCheck. This method gets executed when all the bindings of the component have been checked for the first time.

ngAfterContentChecked: This lifecycle hook gets executed after every check of components content by Angular’s change detection process.  It is called immediately after ngAfterContentInit and after every subsequent ngDoCheck().

ngAfterViewInit: This lifecycle hook gets executed when the components view and child components views have been initialized. This method gets executed only once after the first ngAfterContentChecked().

ngAfterViewChecked: This lifecycle hook gets executed after Angular checks component and child components views i.e when all the bindings of the children directives have been checked; even if they haven’t changed. This method gets called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

ngOnDestroy: This lifecycle hook gets executed just before Angular destroys the directive/component. Use this event to unsubscribe Observables and detach event handlers to avoid memory leaks.  It is the perfect place to clean the component.