Hello, everyone, and welcome back.
In this lesson, we are going to give you a complete overview of all the angles, life cycle hooks that
are available.
Let's see what are all the hooks available and in which order.
They are called by the framework and some typical use cases for each life cycle hook.
So we already have here several life-cycle hooks.
Let's just add the remaining ones here to our cost curve component.
Let's also implement after contentedness, which we already saw earlier in this course, and let's also
implement after viewing it.
So these are the lifecycle hooks that are related to content projection and to local template queering.
Let's quickly implement here some logging for both of these lifecycle hooks.
I'm going to copy here the implementation of these two hooks.
So we have here engy after content in it and we have here engy after viewing it.
At this point, the only life-cycle hook that is missing from being implemented in this component is
engy.
Do check that we have covered earlier in the course.
So let's quickly implement here that engie do shake, life-cycle, hook.
Let's now reload our application and see on the console.
In which sequence are these hooks called by the framework.
Let's open here to the console and let's have a look.
So if we start at the beginning, we're going to see that indeed the first thing that gets called into
the constructor to build the course guard component.
And then we have our first call to engy on changes.
This means that the input properties of this component have already been filled in at this stage.
And we notified here the components in this lifecycle callback that the input properties of the component
have already been filled in.
Next, we are going to call Engie Unended.
This will give the component an opportunity to perform any initialization logic.
And we have the guarantee that these life-cycle hook engy only needs is only going to be called once
by the framework.
Unlike Hengdian changes after these ANGULAR is going to run the change detection mechanism in order
to determine if any changes have occurred.
So we are going to see here a call to engie do check.
So here is the best place to implement any custom change detection logic that we might need this to
occur only in rare occasions.
But if we need it, this is the correct lifecycle hook to call.
After that, ANGULAR is going to initialize the content part of the components.
So if you are doing here any content child or content children queries at the level of our component,
these is the best place to put any initialization logic that might need variables that are populated
using content, shell or content children in a similar way.
If we do any queries in our component to the template itself, using, for example, the at Vue child
decorator, then an initialization logic that needs the variables populated by view.
Child should be put here in engy after viewing it.
So these init methods, the NGO only after content and after viewing it are each only going to be called
once during the whole lifecycle of the components and in this order first and only next after content
in it and finally after viewing it.
So these are initialization methods only called once.
Next, we have the methods that are called every time that there is a change detection run in our application.
So, for example, if we clear here our console and we click here the edit course button, we don't
want to see that.
We have here a call to engy on changes.
So Engy on changes is going to be called once the first time that we populate the properties of our
component.
But it's also going to be called any other time when the input of our component changes.
So this is a great place to put our logic that is going to do some calculation comparing the previous
value of our input property with the new value.
After that, we have to check used for custom change detection if necessary.
After that, we have the two methods.
After constant checks and after vukic.
These are going to be called every time that change detection runs after constant check is going to
be called after the content.
Part of the component has been checked for any changes.
So if we open here our application component, this is the part of the component that we are talking
about, the content path here between the open tag and the close tag of the component installs.
Angular is going to check here, for example, this property course that I couldn't Eurail to see if
this is changed since the last run of change detection or even if this component is running with on
push, ANGULAR is going to check if the source input property has changed since last time.
After this check is then ANGULAR is going to run the after content check lifecycle hook.
These Life-cycle Hook is a great place for doing any modifications.
The data that we need last second before The View gets completely rendered, notice that there is one
limitation.
We cannot modify anything that would change the results of the checks that were done here at the level
of the content path.
So, for example, if we would modify this property, these Life-cycle, who would throw in there because
we are modifying the content of something that was already checked so angular will not know which value
to display the value before the check or the value after the check.
So we would get an error at least in development mode.
Now the last Life-cycle Husky's after view check.
So this is a great place for doing any dumb direct manipulation operations, such as, for example,
setting the focus on a new element that was introduced by the latest data or scrolling to the bottom
of a list of new elements that were just added to the page.
The last Life-cycle hook is engy.
On this drawing, NGO destroys going to be called whenever the component instance gets destroyed.
It's the opposite of engy on init.
Usually we use it to release any resources that the component might hold during its lifetime.
Notice that if you are using Engy on this, try to unsubscribe from any observables that the component
is using.
That is probably not the correct approach.
It's better in those cases to use the angular async pipe that is going to take care automatically of
unsubscribing from any observable past to the template.
So to summarize, most components that you will implement will use NGO in it.
This is the component initialization method and here is where we should put initialization logic and
not on the constructor.
Rarely we will need to use energy on changes, but if we need it, we know how to detect a change in
an input.
Property after content in it will always be necessary.
If you are doing content projection and you need programmatic references to projected content here at
the level of your component, you might not need this.
If you are just using the energy content tag and you are not programmatically accessing any protected
content.
And after viewing it is for when we are using the view, our view children decorator's.
This is the point in time where we are sure those queries have been filled in.
So any initialization logic that depends on those queries should go here.
These two lifecycle hooke's content checked and rechecked should be very rarely needed.
And any logic that we run here should avoid expensive calculations in order not to slow down our application.
If we need to do custom change detection.
Engy to check is a great place for adding that logic.
And with this, we have completed our coverage of all the angular lifecycle hooks that are available
next.
What we are going to do is we are going to do a deep dive on angular modules, how to create the feature
module.
What are the benefits of modules?
This is coming right up in the next section.