Angular Lifecycle Hooks: A Complete Guide

We’ll dig deeper into each lifecycle hook and see how they’re used in Angular

Photo by Nathan Dumlao on Unsplash

In Angular, a component instance has a lifecycle that begins when Angular instantiates the component class and renders the component view and its child views. The lifecycle continues with change detection, in which Angular detects changes in data-bound properties and updates both the view and the component instance as needed. When Angular destroys the component instance and removes its rendered template from the DOM, the lifecycle is complete.

Directives have a similar lifecycle to instances, which Angular creates, updates, and destroys during execution.

Angular applications can use lifecycle hook methods to intercept key events in a component’s or directive’s lifecycle in order to initialize new instances, initiate change detection when necessary, respond to updates during change detection, and clean up before deleting instances.

These hook methods are called by Angular in the following order:

1. ngOnChanges: When an input/output binding value changes
2. ngOnInit: After the first ngOnChanges
3. ngDoCheck: Developer’s custom change detection
4. ngAfterContentInit: After component…