Hello, everyone, and welcome back in this new section of the course, we're going to talk about the
angular component life cycle hooks in order to create here a simple example.
Let's create here at least with only one card.
We're going to head over here to our application component.
And instead of loading here, the data from the back end, let's just go ahead and assign here these
value the courses array, which is available here in this file.
So this is just a plain JavaScript array that we are passing directly here to our view.
So now if you reload, we are going to have here the same data as before.
But this time around, we are bringing the data directly from this file and not from the back end.
Instead of iterating here through a list of courses, let's instead create here only one course we are
going to define here a variable course.
Let's for that use the NGF notation and we're going to access the courses array.
We're going to take the first position of the array and we are going to allow this these into the course
template variable.
So if we try this out, we're going to see that now we only have one card.
So let's now see how does the component lifecycle hooks of the course card component work?
Right now we are already implementing here our first lifecycle hook that we are going to cover, which
is the engy undenied lifecycle hook.
These methods engie only needs like all angular lifecycle hooks is not meant for us to call it directly
in our application code.
So let's say that we will have some functionality that we would like to call somewhere else here on
the application by calling these dot engy only need.
We should not do this.
We should not call the lifecycle hooks directly.
These methods are meant to be called by the angular framework only and not by application code.
So then how does this method exactly work and when does the framework call this method and why not?
To understand how this works, let's bring here to the console some logging so that we know whenever
the method gets cold.
So if we refresh here, our application, we're going to head over here to the console and we're going
to see that this method is only getting cold once.
So as we interact further with the components, as we create here a new title for the course, we are
going to see that even though there are events getting fired and getting handled by ANGULAR, you'll
see that this method was only called once.
Let's not talk about why this method exists.
So if we add here another logging statement, but this time at the level of the constructor, we are
going to see that the constructor is going to get called before and geon in it.
So let's refresh here.
The application.
We can see that the constructor gets called first and only then engy on need, as one would expect.
So both are initialization methods that are called whenever the class gets created.
But the question here is what is the difference between the two methods?
And in order to understand this, let's look here, for example, the value of the course.
Let's log the course here in the console and let's log it also here on Engie on it.
Now, if we reload our application, we are going to see that the course is getting called after the
reload.
We are going to see that whenever the constructor got called, we get here the value undefined, meaning
that the course member variable was not yet defined at construction time.
But whenever we called engy on init, we already have here some data.
So that is the main difference between both methods.
Now we can understand a bit better the need for an NGO on init method.
Whenever the ANGULAR is creating the component, it needs to first call the constructor on it and pass
the constructor dependencies.
But at this moment in time there is no way for ANGULAR to populate here the input member variables.
What ANGULAR does is it finishes calling the constructor and only after that ANGULAR is going to start
to fill in here the component inputs.
So if we want to create some initialization logic that depends on the presence of this input data,
then for that we need to use Engy undenied and not the constructor in general.
The constructor should not contain any logic at all.
The only thing that we should be doing in the constructor of Angular component is to take the dependencies
and save them in member variables.
Noticed that with engy only need, we have no guarantee that the data is going to be available whenever
angular calls the first time.
So this only happened here in this particular example because we are passing here to the curve component,
a variable that is coming here from our application component array and this data is already filled
in here directly from the start.
So if the data would be injected here into the crosscourt asynchronously, such as if the data would
come from the back, for example, then the data would not be present here on Engy Unended.
So in summary.
If your component has any initialization logic, the correct place to put that logic is the engie only
need method in general, the same way that we have a life cycle hook for whenever the component gets
created.
We also have another life cycle hook that gets called whenever the component gets destroyed.
So in order to implement these life cycle hook, we are going to implement here the on destroy interface.
And this interface contains the engie on destroy method.
So this life cycle hook is going to get cold whenever the component gets destroyed.
The energy on destroying methods is a great place for releasing any resources that the component might
be using, such as, for example, long running observables that are fetching data from a real time
database.
This is the right place to unsubscribe from all those open connections.
So let's add here some logging so that we can see the lifecycle hook in action.
In order to trigger these lifecycle hook, we are going to switch over here to our application component
and we're going to trigger the destruction of the earth component.
Let's say, for example, that whenever we click on this button, we are going to clear here the causes
array and that is going to trigger the destruction of the component.
In order to implement that, let's switch over here to the on a course method.
And here we are going to assign to the causes, array and array that contains one element, what we
are going to make that elements and define.
So whenever we axis here, the value using this expression, this is going to be evaluated to false
and NGF is going to hide the component and therefore destroy it.
So let's try this out.
We are going to refresh the application.
Let's open here our console.
We're going to clear everything.
So just like before the constructor gets called and then engy on init.
But now if we click on edit course, we are going to see that the component disappears from the screen
and that we have called here the engie on Destroy Life-cycle Hook, a very common use case for this
life-cycle hook.
Hooking on destroy is using it to unsubscribe from any observables that the component was consuming.
In general, this is best avoided by using the async pipe and passing the observable to the component
directly like we have seen before.
This way, whenever the component gets destroyed, the async pipe will also take care of unsubscribing
from the observable.
So this way we don't have to manually handle subscriptions in our components and release them in engy
on destroy.
These means that the energy undestroyed lifecycle hook should be very rarely needed in practice.
Most of the time we are going to be using engy only need, but very rarely will we need engie on this
dreux.
Let's now continue to explore the multiple lifecycle hooks that we have available.
We are now going to cover the on changes lifecycle hook.