Hello, everyone, and welcome back.
In this lesson, we are going to introduce a couple more angular component Life-cycle hooks.
Let's start with the on changes Life-cycle Hook in order to understand when these Life-cycle Hook is
needed.
Imagine that this component is here.
Some logic that needs to react to the availability of a new course.
So whenever the course input property changes, then something should occur here at the level of this
component.
Now, whenever a new input property gets to the component, the template is going to get recalculated
and the view is going to get updated.
So that process happens automatically.
We don't have to do anything at the level of the component in order for that to occur.
It's just built into ANGULAR.
But we can imagine situations where we would like to have some sort of a callback mechanism that will
inform us that the course has changed so that we can take some action.
Maybe we want to compare, for example, the previous value over the course with a new value and then
take some action here at the level of the component.
So if you want to get notified that an input property of the component has changed, we can do so by
using the on changes lifecycle hook.
We are going to implement that on changes interface.
And this interface requires one method, which is engy on changes.
First, let's have a look at when this method is called by ANGULAR.
We are going to have here some logging in the console.
We are just going to log out the method engie on changes and we are going to reload our application
and see when does this get gold.
So we are going to open here, our console and we are going to have a look here at text so we can see
that we have here a constructor called.
We have here a value and defined as we have seen before.
So the course input variable is not yet filled in at the construction time.
This is normal.
Then we have our very first call to engy on changes.
Only after that we have the first and unique call to engy on it in a similar way to Engy only need this
method.
Engy on changes is being called by angular whenever something occurs in the component lifecycle.
So this method is not meant for us to call it directly.
This method also takes an argument, which is the changes argument.
Let's have a look to see what it contains.
We we're going to reload here, our application and we're going to see that here we have the changes
object and if we open here, the changes object.
We are going to have here a property called cause.
And notice that this property is of type simple change.
So this is an angular built in type that is going to contain here the current value of the course property.
And we are also going to have here the previous value of the property, which was before undefined,
defined.
Now we have field in the property here with some data.
We also have here an extra flag informing us if this is the first time that Hengdian changes is getting
cold or not.
Now, let's see how Hengdian changes works whenever we do subsequent changes to any of the input properties
of our core scav component.
Notice that in this case, we are only modifying here the course.
But if we would modify here the index property, that would also show up here as a separate property.
Let's see this in action.
Let's say that whenever we click here on the edit button, we are going to modify a property of our
course input.
So we are going to modify this method instead of assigning here this value to the courses array.
Let's say that we edit the courses array.
We are going to access position zero.
We are going to access the description of the course and we are going to see if this triggers engie
on changes.
So let's try this out.
We are going to refresh the application again.
We can see that the constructor was called, followed by endian changes, followed by Engy on in it.
But now if we clear here the council and we click here on the edit course property, we are going to
see that nothing happens and this is normal.
This is because we are mutating here.
The course object directly.
We are directly modifying here the description property and these will not trigger Hengdian changes
and GEON changes will only get triggered if the input object itself changes, not if one of the object
properties changes.
Now let's see what happens if we edit here our curtsies array.
But instead of modifying here a property of the course of position zero, we are going to instead create
a copy of the object that we have here and we are going to replace the current object that we have in
the array with the new object.
So let's start by defining here a constant we are going to call it cause.
So this is the course that we want to edit.
We have a reference to it.
Now, what we're going to do is we are going to create here a new course.
This is going to be a.
Of course, object, and we're going to edit this copy and add a new description.
Let's do that directly here.
We are going to have here a new property description and we are going to populated with the string engie
on changes.
Now we are going to head over to our array.
And instead of mutating a property of one of the elements, we are going to replace one of the elements
with our new course.
Now, let's try this out.
We're going to reload the application again.
Everything is working just like before.
We have here some data displayed.
But now this time around, if we click here on it, because we're going to see that the engine changes
lifecycle, who was triggered.
And if we shake here our changes, we have a simple change for the course property.
We can see here that the current value contains the new description that we have just modified and that
the previous value of our course property contains the previous description.
Let's now summarize everything that we have learned about on changes.
So this life cycle, who is going to get triggered by angular ones at component construction time before
the first call to energy undenied?
And it's going to be called again subsequently whenever any of the input properties of the component
changes, if we modify and input data object directly by mutating one of its properties, that will
not trigger engy on changes these lifecycle who is only triggered if we change the reference to the
input object and not a property of the object itself.
These life-cycle hook is meant to be used in situations where we want to have a callback getting called
in our component whenever some of our inputs change.
And with this we have covered almost all the lifecycle hooks available.
We are only missing after constant check and after vukic.
Let's then cover these remaining cycle hooks in the next lesson.