Angular life-cycle hooks

Question

i draw a sketch that represent the flow of the component life-cycle

using sketch.io

after finishing the docs about life-cycle hooks
i came up with this sketch. now is this is the right order of the life-cycle hooks in a component?

Answer 1

The sketch provided by you is somewhat correct. For your reference, I tried implementing each of the hooks. Just in case to determine their point of occurrence I logged each of them to the console.

For your reference, below is the screenshot of my console as I allow my application to load and follow each lifecycle one after the other.

This is the console when the page loads for the firsts time.

Therefore, the components thus called during this lifecycle have their own functionalities:

1)Constructor: A default method which is called when the class is instantiated.

2)ngOnChanges: Executes when a new component is created, when one of the bound properties with @Input changes, also it is the only hook that takes an argument when it is called which is called as SimpleChanges.

3)ngOnInit: Called once the component is initialized. This doesn't allow the component to be visible over the DOM. This runs just after the constructor.

4)ngDoCheck: Runs when change detection runs. It also runs if there is no change and even if it is just an event that occurred, just in case to make sure if there is something that has changed. (for eg: It will run after a button click event irrespective of that it is making ant change or not) 5)ngAfterContentInit: This is called after content(ng-content) has been projected into the view.

6)ngAfterContentChecked: This is called after every projected content has been checked.

7)ngAfterViewInit: Called after the components view (and child view) has been initialized.

8)ngAfterViewChecked: Called every time the view (and child view) has been checked.

In the image below, look for the console when I click over the 'Recipe Book' navbar heading which is a link at the top left corner:

We can clearly see 'ngDoCheck' being called followed by 'ngAfterContentChecked' and then 'ngViewChecked' at the last. If you notice 'ngAfterContentInit' and 'ngViewInit' are only called at the starting when the content has been finally projected to the view. They have nothing to do with the corresponding change that occurs.

9)ngOnDestroy: Called when we generally use an if condition and render the component accordingly. This is mainly called right before the object is destroyed by the angular.

Refer to the below image and look for one of the Recipe information cards that vanishes as I click over the 'Destroy first Component' button:

Here 'ngOnDestroy' is called followed by the 'ngDoCheck' and other following hooks. This will tend the loop to be called once again but then the destroyed content won't get rendered. (FYI, here I have just used a splice method in order to destroy one of the rendered content)

I can also provide the code if needed, hope this might help you as well as others to understand the functioning of the lifecycle hooks in Angular. :)

P.S. Please ignore the rest of the elements over that page screenshots.

Answer 2

Here is what I understand from the Angular.io document. It is may help you.

Answer 3

ngOnChanges() isn't called after the constructor, it's called after change detection is run and change detection updated an @Input().
Also ngDoCheck() is called when change detection is run.
ngOnInit() is called after ngOnChanges() was called the first time.

See also https://angular.io/guide/lifecycle-hooks