Angular Lifecycle methods

Lifecycle hooks are methods called from the creation of a component or a directive to its destruction. For directives, the only lifecycle hooks that can be called include:

• ngOnInit,
• ngOnChanges,
• ?ngDoCheck and
• ?ngOnDestroy.?

For components, the above lifecycle methods can be called together with:

• ngAfterContentInit,
• ngAfterContentChecked,
• ngAfterViewInit
• ngAfterViewChecked

N.B:

The constructor is NOT a lifecycle hook. It is however always called first always when the components are constructed. The major use of a constructor is to inject dependencies that are going to be used by the class.

The lifecycle methods are called in the order below:

ngOnChanges

• Called first to respond to changes of data that is bound to a component/directive mainly through @Input.
• The method receives an object called Simple Changes that can be used to keep track of these changes.
• The lifecycle is very expensive on performance since it can be called every time there is change to the data that is bound thus should be used without complex operations.
• It is limited in that it does not detect changes to properties in an object or array.

ngOnInit

• Called only ONCE after ngOnChanges. If there are no inputs or the component or directive does not implement onChanges, this becomes the first lifecycle hook method.
• Called when initializing the component. Used mainly to load data to be used by the component.

ngDoCheck

• Used to detect changes that angular will not detect on its own. It is called immediately after ngOnChanges as well as the first ngOnInIt.
• Since it is called multiple times it is an expensive lifecycle method. It is advisable not to use ngDoCheck with ngOnChanges since it may be very expensive.
• ngDoCheck can get changes even when a property or array changes to data that is bound to a component or a directive.

ngAfterContentInit

• Called ONCE after the external content is projected by an angular component to the view. It is used to detect changes in content from a component.

ngAfterContentChecked

• Called first aftercontentinit, but called subsequently in response to content changes projected by the angular after ngDoCheck.

ngAfterViewInIt

• Called in response to view changes. Called after initialization of the components view model as well as views of all the children of the component. It is called ONCE after ngAfterContentChecked.

ngAfterViewChecked

• Responds to subsequent changes on the views. It is called afterViewinit and every other time ngAfterContentChecked.

ngOnDestroy

• Lifecycle method called just before the component is destroyed. It is used for cleanup and making sure that there are no memory leaks.

Will be further looking at implementation in another article. I hope this intro was simple enough and concise