doubt in lifecycle hooks

[short yew]

https://angular.io/guide/lifecycle-hooks#sequence-and-frequency-of-all-lifecycle-events

Going through the examples in the official docs right now.

Having trouble understanding the sequence of the lifecycle methods.

**code: **https://stackblitz.com/run?file=src%2Fapp%2Fpeek-a-boo-parent.component.ts

• There is a parent and a child component.
  -The parent component is communicating a variable called "name" to the child component using the @Input directive
  -When the name is updated in the parent component. (By clicking the "Update Hero" button, The lifecycle methods in the child component are run in the following order (the official code uses a logger to find this out):

DoCheck()
AfterContentChecked()
AfterViewChecked()
OnChanges(): name changed to "Windstorm!"
DoCheck()
AfterContentChecked()
AfterViewChecked()

I would have expected:

OnChanges(): name changed to "Windstorm!"
DoCheck()
AfterContentChecked()
AfterViewChecked()

I do not understand why before onChanges() runs, the other 3 methods run too.

[minor garden]

What is to understand? That order was decided by the Angular team, so that is the order they implemented. It's not like it's a natural law or anything.
Perhaps if you reviewed the documentation
https://github.com/angular/angular/blob/cc2d32adb91ebc133b315af86c9e8099bbecbcaf/packages/core/src/interface/lifecycle_hooks.ts#L66-L103

[short yew]

@minor garden

My confusion is due to this statement in the documentation:

ngDoCheck() is Called immediately **after **ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run.

Hence I do not see why in the resulting log, ngDoCheck() and the 2 other methods run before the ngOnChanges().

[minor garden]

Go by what is in the table under "The sequence of log messages follows the prescribed hook calling order:"

[short yew]

@minor garden

The sequence under the table that you mentioned is for when :

1)The child component is created,
2) and then the child component is destroyed.

---

The image that I have sent you are the logs that are printed when:

1. The child component is created: (blue highlighted)
2. The child component is updated:
   (Yellow highlighted) .

Since the actions that are happening are different in both the cases, The tables cannot be compared.

And what I am expecting:

the lines #9, #10, #11 should not be there according to the rules mentioned in the documentation.

[minor garden]

🤷

What is is more important than what is documented

comments are 50% of the time lies, and 50% half truths.

[short yew]

@minor garden

Well yah you are right in that regard.

But since this is a learning resource, and additionally code from the official website, I would have naturally expected that I was missing some concept/ had a wrong understanding about something.

Thank you for your time nonetheless

[minor garden]

blue is first run, were ngDoCheck is called after ngOnInit
12 is the start of a new cycle

I guess 9 could be the DoCheck from the OnChanges on 1

But OnChanges is the start of a cycle

[short yew]

alright.

Thank you for your time.

Well the DoCheck from the first onChanges is already covered on line 4 as far as I see.

But its alright this is one of those weird examples.

[minor garden]

4 is the DoCheck after OnInit