The Component Life Cycle Hooks

The life cycle of Angular components

Angular manages all the components we make for our applications in the same way it manages all of its components, whether they are ones we’ve created or third-party components, such as Angular Material. All components go through the same life cycle, where Angular creates the component, renders it, then creates and renders any child components. Angular also handle changes in data properties within our component and when a component is removed from the view, for example, when navigating to a new view.

Life cycle hooks

All of these stages have life cycle hooks that we can tap into and add our own logic to so that we can have our application do something while a component is going through one of these stages. For example, we may want to load some data before the component is rendered to the view. We could do that as part of the OnInit life cycle hook. But if we want to make sure that the latest data is loaded, we might want to use the OnChange life cycle hook, which ...