Hello, everyone, and welcome back.
It is listen, we are going to talk about that after viewing it Life-cycle Hook.
So as you know, we can query our template using viewer child and we have different ways of doing so.
But the question here is, when are these variables populated, the variables populated by viewshed?
Let's see how early in the activation of this component can we access these variables if we give to
this component here a constructor?
Let's try to see if the container, for example, is already present when the constructor gets called.
If we inspect the console, we are going to see that here at constriction time.
Our container is still undefined.
So the question is, what is the earliest possible moment when we are sure that these references query
by the vehicle the decorator are already filled in?
If we want to access these references at the earliest possible moment in order to do some sort of initialization
operation, we're going to need a life-cycle hook for the component.
We are going to have to implement that after view in lifecycle hook.
So this interface will force us to implement this function.
And after viewing it and this function is the earliest possible moment where all these references populated
here by viewshed are available.
It will be the angular framework itself that is going to call this method after these references are
filled in.
So these methods is not meant for us to call it ourselves.
This is for the framework to call it.
It's called a life-cycle hook because it's part of the component lifecycle.
So let's try out here these new Life-cycle Hook and see that indeed our Karradah one reference is filled
in by inspecting the console.
We are going to see that at construction time.
Our continuative is still not populaton, but here in the engie.
After viewing it Life-cycle Hook, we can see that we get the reference to our container leave as expected
NGF to review.
We need it.
The ideal place to put some initialization logic that needs access to these elements.
When using these and other lifecycle hooks, it's important not to modify the data that the component
is trying to render.
So in this case, we are rendering here multiple courses to the screen.
So if, for example, here on Engy after view, we need we will do some operation synchronously that
would modify the data that would trigger in there.
Let's have a look at it.
We are going to access here the courses array.
We are going to access the first element of the array and let's say that we modify here the description
to some sort of test value.
So this is to simulate a situation where our component, when initializing itself and trying to display
the data for the first time, is during the construction process, also further modifying the later.
Let's see what this would cause.
If we refresh the application, we are going to see that we get here.
And her expression changed after it has been checked.
So if we have a further look here at the error calls and we click here on the spectrum, we are going
to see the exact place in the component where the error is occurring.
So as we can see, this is occurring here at the level of the first expression in our template.
As we can see, it's very important to avoid any data modification operation to we then here synchronously
at the level of the NGF after viewing it lifecycle method, if we set up here, and a synchronous operation
that will modify the data in another JavaScript virtual machine in turn, then we will not run into
this problem.
This problem is caused because we are trying to display the data by building the view and the view.
Construction process is accidentally further modifying the data.
The error that gets thrown is essentially a way of the angular framework, saying that it does not know
how to display this data.
It does not know if it should display the initial value of the data or the new value that was created
during the construction process itself.
This situation could also potentially cause a loop where we are continuously modifying the data while
attempting to rebuild the view so it would break the whole you directional data flow mechanism that
is built in into the framework.
And so we get an error message in development mode.
Let's not take a moment to talk about the scope of the template queries that we are doing.
So as we can see, we can query anything that we have here at the level of the template of the component
itself.
So this is the template of the application component and we have performed here queries on several elements.
Now, what we are going to try to do is we are going to query deeper into the component hierarchy.
So we have here a.
Guard component that inside its template, it has here an image, let's say that, for example, we
give it here a template reference name, let's call it the image.
Let's try to see if these templates reference is visible here at the level of our application component.
Let's then modify here the query that we were making to this element reference.
We're going to try to query here the course image.
Instead, let's remove some of the council logs that we have here to make our program easier to read.
If we now try this out, we are going to see that here in our console.
The coarse image member variable is undefined.
So this confirms to us that it's not possible to query deeper into the component Iraqi.
The scope of the view decorator queries are restricted to the template of the component itself.
We cannot query elements inside shell components and we cannot view the templates of the parent components
as well.
Using View Child to summarize view child is a local template Quairading mechanism.
Whenever we are developing a component and we somehow need the programatic reference to one of the elements
of that particular components template, we can obtain it by using view child.
However, we cannot use viewshed to query several levels down the component directory.
We can only see the elements of the current component template.
Also, we cannot see where the component is being used, so we can only really query the component template
itself and nothing more.
Next, we are going to talk about the companion decorated of View Child, The View Children decorated.