Hello, everyone, and welcome back.
In this lesson, we are going to cover the only remaining life cycle that we have not covered so far.
It's going to be the after you checked Life-cycle Hook, let's quickly implement it.
We are going to implement this interface after a checked and we are going to implement here the corresponding
method engy after vukic.
These Life-cycle hook is very similar to Engy after Caulton checked, as the name indicates.
So let's quickly add here some logging so that we see when is this method getting cold?
Now that we have the logging in place, let's reload here our application and have a look at the log
so we can see that again.
The constructor endian changes and on it is called.
Then we have here engy after contin check called immediately after that, as we have seen before.
And after that we have engy after vukic for clear here to the log and we perform here an event.
Let's say that we click here the edit button.
We are going to see that again.
We have here a call to engy on changes to Engy after content checked to NGF after view check.
So it looks like engy after Vuit check is going to also get calls with each angular change detection
execution.
And it also seems that it will always be called after engy after contant check.
So what is going on here?
When is this called exactly by angular.
Well, angular.
After checking the content part of the cursor component for changes in order to determine if the component
gets rendered, the next thing that ANGULAR is going to do after performing the content projection of
the course image into the engine called Untag Angular will then check the template itself.
So everything else other than the content part to see if something is changed.
Once Angular finishes checking the content of this component to see if something has changed, then
Angular is going to call these methods here engy after vukic.
So this means that here in these life-cycle hook we can no longer modify anything that is being used
directly here by The View.
So if we try to modify here, for example, the value of the course description, we are going to get
an error.
Let's confirm if that is indeed the case.
We are going to change here, the value to Engy after Vukic and we are going to reload here.
The application.
So surprisingly, we still get here.
The value set by Engy after content checked these assignments here.
Then in these life-cycle hook after the view has been checked for changes, has not been applied here
to the user.
So we have here a problem where the view is not in sync with the latest model.
But more than that, if we switch this component here to use default change detection instead of on
push change detection, we are now going to get here and there.
Let's have a look.
The error is very similar to what we had before.
We're going to see that it says expression has changed after it was checked.
So what's going on here?
Angular started by checking this component here for changes it.
Check then for the content part, and then it moved on to the component template and checked here.
In the case of default change detection, if any of this input expressions here have changed after doing
that check, Angular called engy after we've checked in order to notify us that the component has been
completely checked for changes.
Now, if we try to further modify the data after the checks were completed, we are going to get here
an error saying that an expression of the template has changed after the checks have been completed.
And again, we get here and there, meaning that Angular does not know which one of the two values it
should use in order to update the view.
This means that in general, in engie after view check, we cannot modify the data that is getting displayed
by the component.
If we do so, we get an error.
So the question now is when is this method useful?
What are the main use cases for this method?
Let's give an example.
When NGF after review, it might be useful.
Let's say that we have here a list of candidates and we are going to provide a new value for that list,
adding more courses whenever new courses are added to the list.
We would like to scroll to the bottom of the page engy after view check.
That would be a great place to implement that scrolling logic because at this point the new elements
have already been applied by Engelhard to the DOM.
So if we call scroll at that moment in time, then we will effectively see some scrolling on the screen.
If we would call the scroll operation before the elements would not be present on the page, so the
scroll would not have any effect.
Let's now quickly summarize everything that we have learned about Engy after content check and engie
after vukic.
So both life-cycle hooks are called.
With every angle, change, detection, execution for every component, the call to check method is
going to get called first after checking if the content part of the component had any changes.
And then we are going to call the hedgy.
After you checked method after the view itself of the component has been checked for any changes.
This means that this method here, engy after constant check is a great place to do any modifications
to the data of the component before it gets checked for changes.
It's the last opportunity to modify the data on the template.
There is a restriction, though we cannot modify data in the content part of the component that is not
allowed here in this method.
On the other hand, on engie, after you check, we can no longer modify anything that relates to this
component.
We cannot modify anything in the content part or in the template of the component itself.
No data modification that is relevant to the component is allowed here in this methods.
This method is a great place to perform common DOM operations, such as scrolling to the bottom of the
list, setting the focus on a given element, etc. that was not present in the beginning of the change
detection execution.
With both methods.
It's very important to bear in mind that the code that we put here needs to be very lightweight.
If we put some heavy operations in these methods, we are going to slow down our user interface into
a crawl.
And this is because these two methods are executed very frequently.
And with these we have covered the two last Life-cycle Hook method.
Let's now have a complete overview of all the lifecycle hooks and see the different order on which they
are executed.
We're able to remove these expressions here in order to have a running application, and we are now
ready to provide a complete summary on all the multiple lifecycle hooks.