AngularTutorials

Learn Angular Step by Step – Session 9 : Life Cycle Hooks

In the previous session we learned how to do inter-component communication. In this session we will be studying about life cycle hooks in angular.

When you are working with angular you might noticed there is a method called ngOnInit() in every component’s typescript file.

This ngOnIt is a life cycle hook. Angular framework support couple of life cycle hooks.

  1. ngOnChanges
  2. ngOnInit
  3. ngDoCheck
  4. ngAfterContentInit
  5. ngAfterContentChecked
  6. ngAfterViewInit
  7. ngAfterViewChecked
  8. ngOnDestroy

When the component is rendered to the view angular goes in several stages. It allows developers to add some code to be executed in those stages by calling these kind of life cycle hooks. First let’s learn the theory part and then we can do an example to understand it well.

1. ngOnChanges

ngOnChanges lifecycle hook called at the start of the component creation and also it will called agiain when one of our bound properties changes. ( Bounded with @Input() when receive new values).

2. ngOnInit

This method is called once the component is initialized. This doesn’t mean that the component is showing in the DOM but it means that angular finished the basic initialization (i.e. Once the object is created). This will run right after the constructor.

3. ngDoCheck

This method runs whenever change detection is run. That means when something is changed inside the component. For example if the number is changed in the typescript file and need to be updated in template file(html file)m, Angular need to change the template to show that value. So ngDoCheck method runs here.This runs not only when something is changed but also when angular check whether anything has been changed. For example when a button clicked, when a timer triggers when a observable changed angular will check whether any changes are there. So in that case ngDoCheck method runs.

4. ngAfterContentInit

This method is called whenever the content projected via ng-content has been projected in tho the view.

5. ngAfterContentChecked

This method is called every time when the projected content has been checked.

6. ngAfterViewInit

This method runs after the component view has been initialized. This means once the view of the component has been rendered inside the DOM.

7. ngAfterViewChecked

This method is called every time when the view has been checked.

8. ngOnDestroy

This method runs right before the the component get distroyed. That means when the component is removing from the DOM. ( There may be some cases component is hidden from the view but still in the DOM). Here we can do the cleanups for the component. For example if we have subscribe to an observable ( which we will do in the future tutorial) we can unsubscribe it.

So now you know some basic theories about life cycle hooks. Why don’t we go and try those methods and have some idea in our project. So I will open the the Lib app project which we were doing in through out the series and I will go to the book-count.component.ts file since it is a new component and we can do some workaround.

First I will change the constructor and the ngOnInit methods.

 constructor() { 
    console.log("Constructor is called");
  }
  ngOnInit() {
    console.log("ngOnInit is called");
  }

This will console log the statement once the method is called. So if we run the application and check the console by pressing F12 you will see constructor is called and then ngOnInit is called.

To add the other life cycle hooks you can just use is as a method inside the component but it is always good to implement them as interfaces so I will change the component as below.

In the above example you can see I have used each life cycle hook and in that I have put a console log statement to log the hook is called. Further I have imported the interfaces corresponding to the lifecycle hook by implementing it. It is not a must work. You can use life cycle hooks without implementing but as a best practice it is always good to implement it. Now if you refresh the page and check the console you will see the below result.

You can do some experimenter by putting input values, changing variables, changing DOM elements removing components from the view etc. I am not going to do all of them now since it will be some what boring for you. But I will use some of the above hooks in our practice example when it is needed and I will explain the why it is needed in there. After experimenting the life cycle hooks you can remove the code added all of these life cycle hooks will not be used in our application. I will add them once it is needed. So it is good to keep our code clean.

In this session you have studies about life cycle hooks and how to use them. If you have any questions you can use comment section as always. Let’s meet again with a new session.

Comment here