Understanding Angular Life Cycle Hooks

with useful examples!

In an Angular application, the components have their whole lifecycle managed by Angular, from creation to destruction. And it provides us access to lifecycle hooks, which allows us to act in key moments during the component’s lifecycle.

In order to use those hooks, we have to tell Angular we want to implement the desired hook interface. Angular inspects component classes and calls the hook methods if they are defined. Below is how this syntax goes (for OnInit):

export class MyComponent implements OnInit { constructor() { } ngOnInit() {

// Insert Logic Here!

} }

This is the list of the provided hooks by Angular, which are called in this exact order and we will dig into each one of them right after: