Angular Lifecycle Hooks

Angular Lifecycle Hooks

What are Lifecycle Hooks Lifecycle hooks of an Angular Component ngOnChanges lifecycle hook ngOnInit lifecycle hook ngDoCheck lifecycle hook ngOnDestroy

ngOnDestroy lifecycle hook

The ngOnDestroy lifecycle hook gets executed just before Angular destroys the directive/component. Use this event to unsubscribe Observables and detach event handlers to avoid memory leaks.  It is the perfect place to clean the component. Let us see on how to use this lifecycle hook with a simple example.

Similar to our ngOnOnit example, we have a service call using an observable to make a http ajax call to get data from a service, in this example we will use the ngOnDestroy hook to unsubscribe the observable and do a cleanup when the component in unloaded.

ngDoCheck lifecycle hook

The ngDoCheck lifecycle hook gets executed when Angular runs the change detection process. ngOnChanges also gets executed when changes are detected the difference is that ngOnChanges() detects changes for those properties which are passed by value. ngDoCheck() detects changes for those properties also which are passed by reference such as arrays. For performance reasons OnChanges does not fire when the input property is an array/object, in these cases we can use ngDoCheck to perform our own custom change detection.

Let us see how this works with a simple example. We will extend the example which we used for ngOnChanges, we will add one more @Input property to the child component, this time we will add an object instead of a string so that we can see that ngDoCheck gets triggered but not ngOnChanges when the object is changed.

ngOnInit lifecycle hook

The ngOnInt lifecycle hook is executed when the component is initialized, this event can be used to initialize data required by the component. The most common use of this event is to make ajax/api calls to fetch data required to be populated in the component. We can also use this event to initialize properties of the component. This hook gets executed after ngOnChanges() and before any child components are initialized.

Let us see how this works with a simple example. In this example we use the ngOnInit() event to call a service method which uses an Observable to get API data from a service. The response data is stored in a userList object, which can be rendered in the component UI.

ngOnChanges lifecycle hook

The ngOnChanges lifecycle hook is executed when any of the components data-bound input properties are changed. Let us see how this works with a simple example.

We have a parent component which has a nested child component. The parent component has a property “message”, the component also has a button on click of which we change the text of the message property in the button’s click handler. We embed a child component and pass the message as an @Input property to the child component. When we click the button in the parent component the message property changes and hence the value passed in the @Input property will also change, this should trigger the ngOnChanges lifecycle hook in the child component.

Lifecycle hooks of an Angular Component

The following are the lifecycle hooks of an Angular component/directive. These life cycle hooks are executed in the order listed below.

What are Lifecycle Hooks?

An Angular component goes through different stages when it is initialized, changes and destroyed these stages are called lifecycle hooks. These lifecycle hooks helps us interact with the components and its properties through the various stages before it is rendered in the browser, we can make use of these lifecycle hooks to alter the behavior of the component. The constructor is the first method to be executed before any of the lifecycle hook is executed.

At a high level Angular application processing consists of the following 3 stages.