Angular Series #7: Angular component lifecycle
In this article, we will see the lifecycle hooks of components in angular,
A component has lifecycle managed by angular,
- Creates the component
- Renders the component
- Create and render the component children
- Checks when component data-bound properties change
- Destroys the component before removing it from DOM.
To react when this life cycle event occurs, angular offers several lifecycle hooks which are listed below,
- ngOnChanges
- ngOnInit
- ngDoCheck
- ngOnDestroy
Three most commonly lifecycle hooks are,
Get Vaibhav Bhapkar’s stories in your inbox
Join Medium for free to get updates from this writer.
ngOnChanges: Executes, every time when the value of input property changes the hook method receives a SimpleChanges object containing current and previous property value this is called before ngOnInit
ngOnInit: Executes after the constructor and after ngOnChange hook, for the first time it is most commonly used for component initialization and retrieving data from the database.
ngOnDestroy: Executes just before angular destroys the component and generally used for cleanup.
Thank You, See you in the next article !!
You can reach out to me here,
LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar
Email: vaibhavbhapkar.medium@gmail.com
