Hello, everyone, and welcome back in this lesson, we're going to talk about the two last angular
component life cycle hooks that we haven't covered so far.
It's the after content checked and after vukic life cycle hooks.
Let's start with the first of the two.
After content, check these life-cycle who can be implemented by implementing the after content check
interface.
We can implement this interface by implementing the Engy after content check method.
Let's quickly arrive here some logging so that we see when this method is getting called by ANGULAR.
If we now reload the application, we're going to have a look here at the console to see what is going
on so we can see that the constructor is getting cold of this component endian changes and engy on it
just like before.
And now we have here a call to Engy after constant check.
So the question here is, why is this method of getting cold?
When is engy after content check called by the angular framework?
These life-cycle hook is going to get called by Angular whenever Angular finishes checking the content
part of these components.
So this component here is the core scart component.
So if we switch over here to our application component template where the cursor is getting used, if
you remember these parts here that exists between the core squared open tag and the cursor, the close
tag, this is the content part of the component.
In this case, this component here cause image is getting projective inside our core scarer.
So whenever Angular is doing change detection here at the level of this component, one of the things
that it's going to do is to check here the content part for changes in this particular case, angular
shaking here.
If the value of the icon of the course has changed since the last time that change detection was executed
after performing this content check here at the level of the content part of the component, ANGULAR
is then going to call this lifecycle hook method engie after content check.
So this method is going to get cold with every event that ANGULAR is handling.
Let's say, for example, that we glia here.
Our log and we click here on the save course button.
We're going to see that engy after content check is getting called here multiple times.
It's getting cold here whenever we click on the button, whenever we receive some data from the back
end, etc., it's getting cold every time that angular triggers change detection.
If we click here on edit course, we're going to see that we are going to call endian changes like we
have seen before.
And we are also going to check here the content part of this component for changes.
So after doing that, we are going to call again engy after content change.
So as we can see, this method is getting called.
A lot of times this means that we need to be very careful with the logic that we implement in this method.
If we start doing things here, such as, for example, backend calls or other expensive calculations,
that could affect a lot the performance of the application.
This means that the code that we can implement here needs to be very lightweight.
If we implement here some expensive calculation.
This is going to slow down a lot.
Our user interface, one of the natural things that we could try to do in this method is to change the
data that is getting displayed by the component.
So we, for example, we would like to modify the title of the course after it's changed the election
cycle.
These lifecycle would be a good place to implement that logic.
Let's try this out.
Let's say that after the content gets checked, we are going to access here our course component.
We are going to access the description property and we are going to assign it here.
The end after content check value.
Let's try this out.
We were know the application.
We're going to see that indeed.
We have here the string engy after content checked and we don't have here any error in the log.
If we switch here to our cursor component, we are going to find here other examples of things that
can be modified last second using this lifecycle hook.
Let's say that, for example, we would like to change the category of the course.
We would like to set it to advanced.
We can then do that here in this lifecycle.
So let's modify the category properly.
We are going to access the course variable.
We are going to modify category and let's set it to advanced.
Let's try this out.
We are going to reload the application and we are going to see that indeed our cart contains here a
modified title and we have here the advanced tag.
So it looks like these life-cycle hook is a great place to do last second modifications to the data
after each change detection run.
But let's not try to modify a different property.
We are going to go here to our application component.
And let's say that we would like to try to modify here the.
Achint, you are property that, unlike the two other properties that we have modified successfully,
the title and the label with the category, this property here, of course I can Eurail is being used
in the content part itself.
Let's see what would happen if we would try to modify this property instead of the other two.
So here in our implementation, we are going to set the value of the course I can Eurail to the blank
string.
Let's see what happens now.
So this time around, we are going to see that we get a Nager here in the console.
So if we scroll down, we are going to get this er er expression changed after it has been checked and
we can even see what is causing the problem.
So it's indeed the ImageWare property.
It had the previous value that pointed to DSL and the current value is blank.
So it looks like we can only change certain properties of our input data in these lifecycle method.
The question now is what is going on here?
Why can we modify one of the properties and not the other?
Well, the answer is simple.
These two properties, unlike the original property, are not used here in the content part of the course
curve component.
So whenever Engelhard is trying to detect if something changed in the components in order to decide
if the components should be rendered, Angular is going to start by checking the content part for changes.
Angularity is going to shake if some of the data used by the content part in this case, the image has
changed or not.
Immediately after this check for changes in the content part of the component, ANGULAR is going to
call these lifecycle hook engie after content check in order to notify the component that the framework
is finished, checking the content part for changes.
So now we can indeed modify here certain properties of the input data, but we can only modify properties
that have not been used here in the content part.
If we try to modify the iconic property after ANGULAR has already finished checking the content part
for changes, well, that would be problematic because the goal of the change detection mechanism is
to determine if the components should be rendered.
So the change detection process itself should not itself modify the data that could even cause an infinite
loop.
Let's say that we have some data we try to shake if the data has changed in order to render the components
and the process of checking the data would again change the data itself, creating either potentially
a loop, even an infinite loop, or we could run into a situation where the view would not accurately
reflect the last value of the model anymore, which is something that we want to avoid.
That's not the goal here of the change detection mechanism.
The goal here is to always reflect the latest data changes in the view in a transparent way.
This means that the situation that we have created here is problematic.
Angular is trying here to build the view based on some initial data and the process of building the
view has itself modified.
The data so angular does not know what to use here in this case, and it's following us here.
And er, so if we come out again, this expression, we are going to see that again.
We don't have an error and we have here the title and the category properties correctly modified.
So if you are looking for a place to modify some data last second after its change detection cycle,
this is a great place to do it.
But be aware that you will not be able to modify properties that are part of the content, part of the
component.
If the component even has a content path, it might be that your component is not using content projection
and the energy content feature.
And with this we have covered the after content checked lifecycle hook.
Now let's cover our last life.
Who it's going to be the after vukic life cycle hook.
In the end of the section, we are going to provide a complete summary of all the life cycle hooks and
we are going to show in which order they are getting called.