Hello, everyone, and welcome back.
In this lesson, we are going to continue to explore the view of the crater that we have used to carry
our template besides the functionality of querying a component based on the component class like we
have done here.
This declaration provides several other types of alternative queries.
For example, we can also query based on a template reference, let's say that we are going to give
to this card here a template, a reference name called let's call it card drive to make it clear that
this is a template reference.
We can also query here our course card component based on this template name we are going to replace
here.
In our view, shall decorated the name of the component by a name of a template reference.
If we now try this out, we are going to see that the program is still compiling.
And if we head over here to the council, we are going to see that now.
We get here the coursework component just like before.
But this time around we are wearing based on the name of the reference and not on the name of the component.
This is useful in the scenario where we have multiple cards here on the screen and we might want to
query them separately based on their template name.
Let's quickly try that out to see if that works.
We are going to name this character, reference one, and we're going to create here a second character
that is going to point to a new course.
We're going to make it, for example, the second of the array.
And we're going to name this reference as reference to we are going to go here to our component and
we are going to create here another query.
This time around, we are going to query a second card.
And let's also rename here these variables so that we can print them out separately to the screen.
So let's try these out the card.
No one is going to be printed out here.
And we are also going to print in a separate line card number to let's see if this is working as expected.
We reload the application.
We can see that we have here in the two cards.
And now if we trigger here this event handler, we are going to see that card number one corresponds
to the first course card.
Number two corresponds to the second course.
So this is working as expected.
Notice that so far we have been injecting here components, but these can also be used for injecting
plain e-mail elements.
Let's quickly try these out instead of injecting here a component, let's select here from the template,
a plain e-mail element that we would like to inject.
Let's give to this div container a template reference.
We are going to call it container.
So let's see, how can we query display in HTML element that the we are going to switch here to our
component and we're going to create here a new view.
Shall query.
Let's first define what we are querying.
So this is a member variable called container and we are going to give it the type element Raef.
So this is a type from angular core that is going to allow us to handle plain native DOM elements.
Let's annotate this with The View child, the creator, and we are going to specify that we want the
container template to reference to make it clear that the query is being based on the name of the template
reference and not the name of the member.
Very well.
Let's rename this to Container Div and let's bring these out here to the screen.
If we now try this out, we are going to see that here in the console.
When we click here on The View Course button, we are going to get element reference here at the level
of the console.
So notice that element reference is an object.
It has a property called native element and these corresponds to this div that courses element that
we have here.
If we hover over it, we can see that this div is getting highlighted by the chrome dev tools and that
it corresponds in the to the container div that we have here in our application template.
As we can see, the view shall decorator is going to give us a different behavior depending on if we
are using it to query plane dom element such as the case of the container live or if we are creating
a component in the case of components, we are going to get back a reference to the component itself
and not to the e-mail element course care that is also available here at the level of the DOM.
On the other hand, in the case of plane e-mail elements, we are going to get the e-mail element directly.
But each component, as we have seen earlier in the course, corresponds to Dom element, a custom dom
element in this case, the course decorative element that we have here.
This is also an existing e-mail tag in our page.
So let's say that you have a use case in your application where you would like to get the reference
to the e-mail element, of course, card and not to its component to its component instance.
Well, that is also possible for that.
We need to go here to our component here, to The View child query, and we need to pass in here and
options object.
This option object provides here a Reeth property that we can fill in with the type that we want to
query.
So by default, whenever we are querying a component, we are going to get the component instance.
But we might also want to query that element reference instead.
So with this query configuration, we are now going to get here a reference to the element and not to
the component instance.
Let's try this out.
Let's see what we get here in the console whenever we print out here.
The card one member variable.
If we click here on Vue course, we are going to see that this time around.
Yet here, a reference to the cost curve element as we see here, highlighted in the dev tools and not
to the course card component instance like we had before.
As we can see, the child's view querying mechanism is very flexible.
Using this decorator, we can get a programmatic reference to just about anything that is part of our
template, either a native element or a component.
Let's now continue to dive deeper into the subject of view querying.
We are going to talk about angular lifecycle hooks.
We are going to introduce the after viewing it lifecycle hook.