Component Life Cycle Hooks in Angular

This section provides an overview of how to use Angular event hooks. Angular invokes the life cycle hooks on directives and components as it creates, changes, and destroys them. Using lifecycle hooks, we can further customize the behavior of our components during their creation, updating and destruction.

What is Angular Component lifecycle hooks

When starting the angular application, it creates and renders the root component. It then creates and renders its Children’s & their children. It forms a tree of components.

Once Angular loads the components, it begins the process of rendering the view. To do that, it needs to check the input properties, evaluate the data bindings and expressions in order to render projected content. Angular also removes the component from the DOM when it is no longer needed.

Angular lets us know when these events happen by using lifecycle hooks

The Angular life cycle hooks are simply callback function, which angular invokes when a specific event occurs during the component’s life cycle.

For example,

• ngOnInit is executed whenever the component is initialized for the first time.
• When an input property changes in a component, Angular invokes ngOnChanges.
• If an Angular component is destroyed, Angular invokes ngOnDestroy.

Angular lifecycle hooks

The following are complete list of life cycle hooks, which angular invokes during the component life cycle. Angular triggers these functions when a specific event happens.

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

Change detection Cycle

Before we discuss lifecycle hooks, let us understand the change detection cycle.

The change detection mechanism is used by Angular to keep the component in sync with the template.

Consider the following code.

<div>Hello {{name}}</div>

Angular updates the DOM as the value of a name changes. And it does it instantly.

How does angular know when the value of name changes? It does this by running a change detection cycle on every event that may result in a change. It runs continuously, regardless of changes in input, DOM events, timer events like setTimeout() and setInterval() , http requests etc.

With the change detection cycle, Angular checks each and every bound property in the template, with that of the component class. If it detects any changes, it updates the DOM.

Angular raises life cycle hooks during the important stages of its change detection mechanism.

Constructor

A component’s life cycle begins, when Angular creates the component class. The first method invoked is the class constructor.

Constructor is neither a life cycle hook nor it is specific to Angular. This is a Javascript feature. When you create a class, it invokes the constructor method.

Angular uses a constructor to inject dependencies.

None of the components input properties are yet available to use. Neither of its child components are constructed. Projected contents are also not available.

Hence there is not much you can do in this method. And it’s also recommended to avoid using this method.

When Angular instantiates the class, it kicks off a change detection cycle for the component.