Angular Component Lifecycle Hooks

Angular lifecycle hooks allows you to implement critical logic at the right time of a component's lifecycle. During the process of component creation, besides the constructor which is mainly responsible for dependency injection and property initialization, there are lots of lifecycle hoods you can add logic to by implementing corresponding lifecycle interfaces.

All possible lifecycle hooks are listed below that may be called in the process of component creation. Note those functions are called in their listed order. Since ngOnChanges is called after the Constructor, the component input properties are not available in the Constructor.

After a component is created, it enters into a stage of change detection cycle which update itself whenever changes are detected. The following are four lifecycle hooks that runs in the order of being listed.

When it's time for Angular to destroy a component, a last but very important (you almost always want to implement this.) lifecycle hook will be called. This is ngOnDestroy which you can implement resource clean up logic in it, like unsubscribe Observables and detach event handlers to avoid memory leaks.