ng-hooks in Angular 4

In this section, we will talk about Angular Life Cycle hooks. Angular supports couple of life cycle hooks. Let’s take a closer look at that. In a nutshell, whenever any new component gets created, Angular goes to couple of different phases in this creation process. This also gives us opportunity to hook into different phases and utilize the same to its maximum. Below is the glimpse of ng-hooks in sequential order.

Below in the snippet, I have modified movies.component.ts file and added console.log() in constructor and on ngOnInit(), just to test the sequence.

With the above change in place, When I see the console window, it will appear like Therefore, irrespective of any ng-hooks, constructor will be called first and then angular life cycle get started. Now, In order to confirm the same. Now, let’s start from first event which is ngOnChanges. Below is the finished snippet for the same. Since, ngOnChanges is tied with any Input() decorator. Hence, I have implemented the same in 

You can also see that I have implemented onChanges as well. This is true for all hooks. However, implementing the method alone will do the trick, but it would be nice to include interfaces and then implement the same. Now, this is the only hook, which receives the argument. Basically, here we receive changes argument, which is of type simpleChanges. Therefore, in the section, I have simply logged changes so that we can see what’s inside. With the above change in place, when I refresh the page, I can see the new output on load.

Here, I can see three onChanges event as I have three reviews associated with @Input() decorator. Now, If I expand the same, it will present the below output. Here, its showing that review is of type SimpleChanges with current values.

Now, let’s look at other hook which is DoCheck. Below is the finished snippet for the same.

This hook will run when every change detection runs. Also, in order to better explain the hooks, I have commented two sets of values from reviews.ts as with multiple values, this hook will run multiple time. Hence, for better understanding; I have commented other two values. Below is the finished snippet for the same.

And,

With the above change in place, it will print the following output.

Here, ngDoCheck ran twice as this is development mode. For development mode, there is extra change detection cycle runs at the end. Now, the next hook is afterContentInit. Below is the finished snippet for the same.

With the above change in place, it will produce the following output.

This hook will run only once. Below, is the finished snippet for the same.

And, output will look like

Now, this hook called twice as this has to run after every change detection cycle and ngDoCheck ran twice, hence its OK. Next ones are also simple. Here, I have considered two hooks in one shot. They are AfterViewInit and AfterViewChecked. Below, I have pasted finished implementation for the same.

With the above change in place, it will appear like

Now, last but not the least is OnDestroy event. Now, in order to understand the same, we need to implement few markup changes like shown below. Here, in movies.component.html file, I have basically added one button to remove the review from the DOM.

Next, in movies.component.ts file, I have implemented both the button function and OnDestroy event as well. Below is the finished snippet for the same.

With the above change in place, it will look like initially.

With normal hooks in sequential order.

Now, as soon as, I click on Remove Component button, it will remove the review from the DOM and hence trigger the event as well like shown below.

With this, ng-hooks come to end. I hope you would have liked this session. In the next section, we will delve further. Till then stay tuned and Happy Coding.

Code:- https://github.com/rahulsahay19/Angular-4-components/tree/Life-Cycle

Thanks,
Rahul Sahay
Happy Coding

402 total views, 1 views today