Hello, everyone, and welcome back.
In this lesson, we are going to talk about the view children decorate there.
So this works in a very similar way to view child.
But instead of allowing us to query only one element on the page, we can instead query a collection
of related elements.
Let's take a look at an example.
So as you can see, we are using energy for like we did before, to loop through our collection of courses
and we are printing all of them here to the screen.
Now, imagine that this component, the application component, would need to get the reference not
only to a particular course, Carol, belonging to the list, but we would like to get a reference to
the complete collection of cards that we have available here on the page.
So this is possible using the view children decorate there.
So let's have a look at this in action.
We are going to start by defining here a member variable called Kurts.
For the moment, we are not going to edit any type and we are going to apply it to The View children
decorator.
So this works in a very similar way to view child.
We are also going to pass in here the type of the component that we want to query.
So in this case, we want to get the reference here to this collection.
Of course, cards just like the case of the Witchel decorator.
This variable is going to be populated here at the earliest on the engie after viewing it lifecycle
hook.
So if we print out the cards, remember variable to the council, we're going to see what type do we
get back?
If we now try out this template query, we're going to see that here on the console.
We get a new type.
We have here a query list.
It contains here a few properties.
So we don't get back here.
An array, of course, card components.
We get a different type.
Let's have a look at the grocery list, type in more detail.
So we are going to pass it here when parametric type, which specifies what is the type of each of the
elements in the collection.
Let's now see here on Engy after view, we need what properties do we have available in a query list.
So if we access it and we use our autocomplete there, we are going to see that we have a series of
properties.
So these properties are typically used to handle a collection.
Many of these properties are also available in a plain JavaScript array, but there are several differences,
too.
Let's then start with the first property.
So this is going to give us the first cad on the list.
Let's try this out.
We are going to bring this to the screen and see that indeed the first property is going to give us
here the angular core deep dive course.
So that is indeed the case as expected.
What other properties do we have here?
We have the property less that would give us the best care than the least we have here for each that
will allow us to iterate through each element of the list and do something with this element.
We have Len, we have maps.
So these are the typical array operators.
But we also have here the change is observable.
So this is the first observable that we encounter in the angular API so far.
Let's have a look at what we can do with this.
We are going to take this reference to the card element.
We are going to access changes and we are going to subscribe to these observable.
So these observable is going to be meet multiple values over time as the collection gets modified.
Let's bring it out here to the council.
The values that are getting emitted, we are going to bring to the values by passing to the subscribe
method of function.
This function is going to get cold whenever a new value is emitted by changes and we are going to print
out the immediate value to the screen.
If we now try this out, we are going to notice that nothing is getting printed here to the council
and this is normal.
This is because changes is only going to emit new values if there is some modification to the state
of the collection here.
So new values are going to be emitted if, for example, we have here a new course to the end of this
at least.
Let's try this out.
We are going to have here a button to our page here on top of the application component that is going
to do some sort of modification to our courses array.
Let's then of here a button.
We are going to call it added courses.
And when this button gets click, we are going to add here a call to a method that is going to do some
sort of modification to the list.
So let's then add here an event handler on courses edited and in the implementation of this method here
in our application component, we are going to access here our courses array and we're going to push
a new element to the end of the collection.
So we are going to, for example, take here this course from.
Our courses are ready and we're going to add it again at the end of the courses collection just to trigger
a collection modification operation.
So if we now try these out and we open the console before we click here on our new added courses button,
we're going to see that just like before, these subscription to the change is observable was not emitting
any value.
But notice now what happens if we click here?
We have here a new value emitted.
So just like the case here of our view, children query what we're getting here emitted as values are
instances of query lists.
We can also see that the length of these limited value is eleven.
So this is the new value of the collection and not the old, as we can see, view children give us everything
that we need to query collections in our template.
We get here as the result of the query, a query list containing all the values, matching the query
just like before.
In the case of child, we can also specify here what type of elements do we want to extract.
So in the case here of our course cards, let's say that instead of obtaining here references to each
card component, we would like to get a reference to the DOM element of each component.
In order to do that, we are going to head over here to our template and we're going to pass in here
to our query and auxillary configuration elements, and we are going to see exactly what we want to
read that is associated to each matching result.
So in this case, we want to hear the element reference.
So this time around, our query lists will not give us an array of course, card components.
We will get an array of plain dumb elements.
Let's have a look at that in action here.
Let's simply bring to the console here the content of the Cairns variable.
So if we now try this out, we are going to see that indeed here in our console we get a query list.
But the values such as, for example, the first value are instances of element Raef.
So what we get here are the multiple DOM elements that correspond to each card.
As we can see here on the tools, whenever we over these div, we are going to see that the card is
getting highlighted.
So this confirms that what we are getting here is a list of references to native DOM elements and not
a list, of course, card component instances.
Let's now quickly summarize everything that we have learned about Vue child and view children.
So as we have seen, these are local template querying mechanisms.
Whenever we are building our components and we find that we need a programmatic reference inside our
component class to one of the elements contained in the template, we can get that reference by using
either view child or view children.
The squaring mechanism is flexible.
We can, for example, query a component, a shelter component in our template and get a reference to
the component instance.
Or we can even query plain dumb elements, including component elements that is available via the Reid
property.
The key thing to bear in mind about the view child and children, is that this is a local querying mechanism
so we can only query elements of the component template and nothing more.
This means that the view child querying mechanism cannot see inside the templates of child components
or parent components.
It's really only meant to query the current component where we are using it.