Hello, everyone, and welcome back.
We are now going to start to cover some of the more advanced features of angular core.
We're going to start with template squaring with view child end view children.
So these are two the curators that we have available for performing queries in our components template.
As we have seen before, many times we can go the interaction between our components or the different
elements of the template by simply using template references and accessing the element directly in the
template.
However, what happens many times, too, is that adding template references at the level of our template,
including all our logic directly here on the template, is not sufficient.
Many times our component itself needs a programmatic reference to some of the elements of the template.
Let's say, for example, there could be use cases where the courts curve component needs a reference
to the image or to the button directly here at the level of the cursor component class, the typescript
class, and not only at the level of the template itself.
So in that case, what we want to do is we want to perform a template query for obtaining a reference
to an element template and access it here at the level of our component class.
That's what the viewed child and children decorator's are for.
Let's give a concrete example.
We're going to switch back here to our application component and we're going to simplify a little bit.
Our example.
We are going to define here one single course card instead of a list of cards.
We are then going to query this template and add that a reference here at the level of our application
component to our course curve.
So our cursor will no longer be part of this engy for loop.
We only have one card.
We are going to fill this in with the first element of our courses array.
So we are going to access here the first element using this notation.
And to keep this example simple, let's say that our course card component is going to add a default
value here for our Karith index if the card index property is not filled in.
So if nothing is specified, this is going to default to the empty string.
We're going to try this out.
So as we can see, we have here our card defined here at the level of our application component.
Now, let's see, how can the application component template can get a reference to this course card
in order to obtain a reference to the course card?
We are going to be using The View shall decorate.
So let's see how this works.
We are going to define here a variable called card that is going to be, of course, card component.
In order to populate this variable, we are going to use the following decorator view child.
And here inside the parenthesis, we need to specify how do we want to obtain this element.
In this case, we are going to pass in here the name of the course card component class itself.
And this way, this variable is going to get populated with a reference to this component instance.
Let's see that indeed this variable is getting populated.
Let's say that whenever we click here on The View button, we're going to bring to the console our car.
We're going to have a look at this in action.
Let's open here to the console and let's have a look at what gets printed when we click here on Vuko.
So as you can see, our course card component instance is getting printed to the screen.
As you can see, this corresponds to an instance of this class we have here, the course property and
we have here the course INM property.
We don't happen to have here in the console the card index because it's currently undefined.
As we can see, the view shall decorate.
There is a template querying mechanism.
We can use it to get references to any element in the template.
Notice that in this case, we only have here one matching card to The View shall query that we have
here.
Let's see what would happen if we would have here two matching elements.
So we are going to create here a different course card and we are going to pass it.
The second element in the courses array.
So if we now reload our application, we are going to see that indeed we have here two different course
cards with different data.
But if now we click here in one of these buttons in order to trigger here the on course selected method
and see what value was square.
So if we hit here, for example, this button, where do we see that?
We have here the first matching element in our template.
So if our query here has multiple matching elements, we are going to get here the first matching element.
So this means that our program will not in if there are multiple matches for the query.
And with this we have introduced the base for.
Rationality of The View shall decorator, this decorator is very commonly needed.
You're going to be using it all the time for building your angular components.
Let's then dive deeper into it and see what other features it provides.