1 00:00:03,880 --> 00:00:06,020 Hello, everyone, and welcome back. 2 00:00:06,130 --> 00:00:10,210 In this lesson, we are going to talk about the view children decorate there. 3 00:00:10,300 --> 00:00:13,420 So this works in a very similar way to view child. 4 00:00:13,420 --> 00:00:19,840 But instead of allowing us to query only one element on the page, we can instead query a collection 5 00:00:19,840 --> 00:00:21,290 of related elements. 6 00:00:21,340 --> 00:00:23,090 Let's take a look at an example. 7 00:00:23,110 --> 00:00:29,110 So as you can see, we are using energy for like we did before, to loop through our collection of courses 8 00:00:29,110 --> 00:00:31,930 and we are printing all of them here to the screen. 9 00:00:32,049 --> 00:00:37,600 Now, imagine that this component, the application component, would need to get the reference not 10 00:00:37,600 --> 00:00:43,630 only to a particular course, Carol, belonging to the list, but we would like to get a reference to 11 00:00:43,630 --> 00:00:47,890 the complete collection of cards that we have available here on the page. 12 00:00:47,980 --> 00:00:52,030 So this is possible using the view children decorate there. 13 00:00:52,120 --> 00:00:54,020 So let's have a look at this in action. 14 00:00:54,040 --> 00:00:58,120 We are going to start by defining here a member variable called Kurts. 15 00:00:58,120 --> 00:01:04,660 For the moment, we are not going to edit any type and we are going to apply it to The View children 16 00:01:04,660 --> 00:01:05,510 decorator. 17 00:01:05,620 --> 00:01:08,570 So this works in a very similar way to view child. 18 00:01:08,590 --> 00:01:13,650 We are also going to pass in here the type of the component that we want to query. 19 00:01:13,690 --> 00:01:17,320 So in this case, we want to get the reference here to this collection. 20 00:01:17,320 --> 00:01:21,490 Of course, cards just like the case of the Witchel decorator. 21 00:01:21,640 --> 00:01:28,450 This variable is going to be populated here at the earliest on the engie after viewing it lifecycle 22 00:01:28,450 --> 00:01:28,960 hook. 23 00:01:28,990 --> 00:01:34,990 So if we print out the cards, remember variable to the council, we're going to see what type do we 24 00:01:34,990 --> 00:01:35,770 get back? 25 00:01:35,770 --> 00:01:40,780 If we now try out this template query, we're going to see that here on the console. 26 00:01:40,780 --> 00:01:42,430 We get a new type. 27 00:01:42,430 --> 00:01:44,470 We have here a query list. 28 00:01:44,470 --> 00:01:47,290 It contains here a few properties. 29 00:01:47,320 --> 00:01:49,300 So we don't get back here. 30 00:01:49,410 --> 00:01:51,820 An array, of course, card components. 31 00:01:52,060 --> 00:01:53,960 We get a different type. 32 00:01:53,980 --> 00:01:57,510 Let's have a look at the grocery list, type in more detail. 33 00:01:57,550 --> 00:02:03,610 So we are going to pass it here when parametric type, which specifies what is the type of each of the 34 00:02:03,610 --> 00:02:05,270 elements in the collection. 35 00:02:05,380 --> 00:02:11,800 Let's now see here on Engy after view, we need what properties do we have available in a query list. 36 00:02:11,800 --> 00:02:17,980 So if we access it and we use our autocomplete there, we are going to see that we have a series of 37 00:02:17,980 --> 00:02:18,880 properties. 38 00:02:18,910 --> 00:02:22,990 So these properties are typically used to handle a collection. 39 00:02:22,990 --> 00:02:29,440 Many of these properties are also available in a plain JavaScript array, but there are several differences, 40 00:02:29,440 --> 00:02:29,780 too. 41 00:02:29,800 --> 00:02:32,470 Let's then start with the first property. 42 00:02:32,620 --> 00:02:36,160 So this is going to give us the first cad on the list. 43 00:02:36,340 --> 00:02:37,390 Let's try this out. 44 00:02:37,390 --> 00:02:43,870 We are going to bring this to the screen and see that indeed the first property is going to give us 45 00:02:43,870 --> 00:02:46,990 here the angular core deep dive course. 46 00:02:47,140 --> 00:02:49,650 So that is indeed the case as expected. 47 00:02:49,870 --> 00:02:51,970 What other properties do we have here? 48 00:02:52,180 --> 00:02:58,090 We have the property less that would give us the best care than the least we have here for each that 49 00:02:58,090 --> 00:03:04,110 will allow us to iterate through each element of the list and do something with this element. 50 00:03:04,120 --> 00:03:06,540 We have Len, we have maps. 51 00:03:06,540 --> 00:03:09,310 So these are the typical array operators. 52 00:03:09,430 --> 00:03:13,180 But we also have here the change is observable. 53 00:03:13,180 --> 00:03:18,450 So this is the first observable that we encounter in the angular API so far. 54 00:03:18,520 --> 00:03:20,760 Let's have a look at what we can do with this. 55 00:03:20,770 --> 00:03:23,900 We are going to take this reference to the card element. 56 00:03:23,920 --> 00:03:29,110 We are going to access changes and we are going to subscribe to these observable. 57 00:03:29,290 --> 00:03:36,350 So these observable is going to be meet multiple values over time as the collection gets modified. 58 00:03:36,370 --> 00:03:38,710 Let's bring it out here to the council. 59 00:03:38,710 --> 00:03:44,140 The values that are getting emitted, we are going to bring to the values by passing to the subscribe 60 00:03:44,140 --> 00:03:45,670 method of function. 61 00:03:45,700 --> 00:03:52,030 This function is going to get cold whenever a new value is emitted by changes and we are going to print 62 00:03:52,030 --> 00:03:53,880 out the immediate value to the screen. 63 00:03:54,040 --> 00:03:59,530 If we now try this out, we are going to notice that nothing is getting printed here to the council 64 00:03:59,650 --> 00:04:00,810 and this is normal. 65 00:04:00,850 --> 00:04:07,240 This is because changes is only going to emit new values if there is some modification to the state 66 00:04:07,240 --> 00:04:08,530 of the collection here. 67 00:04:08,560 --> 00:04:14,890 So new values are going to be emitted if, for example, we have here a new course to the end of this 68 00:04:14,890 --> 00:04:15,400 at least. 69 00:04:15,580 --> 00:04:16,750 Let's try this out. 70 00:04:16,750 --> 00:04:22,960 We are going to have here a button to our page here on top of the application component that is going 71 00:04:22,960 --> 00:04:27,700 to do some sort of modification to our courses array. 72 00:04:27,760 --> 00:04:29,740 Let's then of here a button. 73 00:04:29,890 --> 00:04:32,260 We are going to call it added courses. 74 00:04:32,260 --> 00:04:38,380 And when this button gets click, we are going to add here a call to a method that is going to do some 75 00:04:38,380 --> 00:04:40,440 sort of modification to the list. 76 00:04:40,450 --> 00:04:47,770 So let's then add here an event handler on courses edited and in the implementation of this method here 77 00:04:47,770 --> 00:04:54,430 in our application component, we are going to access here our courses array and we're going to push 78 00:04:54,430 --> 00:04:56,830 a new element to the end of the collection. 79 00:04:56,830 --> 00:05:00,370 So we are going to, for example, take here this course from. 80 00:05:00,450 --> 00:05:06,680 Our courses are ready and we're going to add it again at the end of the courses collection just to trigger 81 00:05:06,690 --> 00:05:08,730 a collection modification operation. 82 00:05:08,880 --> 00:05:15,300 So if we now try these out and we open the console before we click here on our new added courses button, 83 00:05:15,330 --> 00:05:21,180 we're going to see that just like before, these subscription to the change is observable was not emitting 84 00:05:21,180 --> 00:05:21,750 any value. 85 00:05:21,760 --> 00:05:24,250 But notice now what happens if we click here? 86 00:05:24,360 --> 00:05:27,200 We have here a new value emitted. 87 00:05:27,240 --> 00:05:33,630 So just like the case here of our view, children query what we're getting here emitted as values are 88 00:05:33,630 --> 00:05:35,940 instances of query lists. 89 00:05:36,120 --> 00:05:40,290 We can also see that the length of these limited value is eleven. 90 00:05:40,320 --> 00:05:46,920 So this is the new value of the collection and not the old, as we can see, view children give us everything 91 00:05:46,920 --> 00:05:50,040 that we need to query collections in our template. 92 00:05:50,070 --> 00:05:55,980 We get here as the result of the query, a query list containing all the values, matching the query 93 00:05:56,160 --> 00:05:57,420 just like before. 94 00:05:57,420 --> 00:06:03,540 In the case of child, we can also specify here what type of elements do we want to extract. 95 00:06:03,570 --> 00:06:10,410 So in the case here of our course cards, let's say that instead of obtaining here references to each 96 00:06:10,770 --> 00:06:16,680 card component, we would like to get a reference to the DOM element of each component. 97 00:06:16,680 --> 00:06:21,900 In order to do that, we are going to head over here to our template and we're going to pass in here 98 00:06:21,900 --> 00:06:29,010 to our query and auxillary configuration elements, and we are going to see exactly what we want to 99 00:06:29,010 --> 00:06:32,400 read that is associated to each matching result. 100 00:06:32,490 --> 00:06:36,200 So in this case, we want to hear the element reference. 101 00:06:36,210 --> 00:06:42,620 So this time around, our query lists will not give us an array of course, card components. 102 00:06:42,630 --> 00:06:45,720 We will get an array of plain dumb elements. 103 00:06:45,750 --> 00:06:47,960 Let's have a look at that in action here. 104 00:06:48,090 --> 00:06:53,360 Let's simply bring to the console here the content of the Cairns variable. 105 00:06:53,490 --> 00:07:00,120 So if we now try this out, we are going to see that indeed here in our console we get a query list. 106 00:07:00,120 --> 00:07:05,890 But the values such as, for example, the first value are instances of element Raef. 107 00:07:06,030 --> 00:07:11,030 So what we get here are the multiple DOM elements that correspond to each card. 108 00:07:11,040 --> 00:07:17,040 As we can see here on the tools, whenever we over these div, we are going to see that the card is 109 00:07:17,040 --> 00:07:18,070 getting highlighted. 110 00:07:18,120 --> 00:07:25,680 So this confirms that what we are getting here is a list of references to native DOM elements and not 111 00:07:25,680 --> 00:07:28,680 a list, of course, card component instances. 112 00:07:28,860 --> 00:07:34,250 Let's now quickly summarize everything that we have learned about Vue child and view children. 113 00:07:34,590 --> 00:07:38,880 So as we have seen, these are local template querying mechanisms. 114 00:07:38,880 --> 00:07:45,420 Whenever we are building our components and we find that we need a programmatic reference inside our 115 00:07:45,420 --> 00:07:52,380 component class to one of the elements contained in the template, we can get that reference by using 116 00:07:52,380 --> 00:07:54,890 either view child or view children. 117 00:07:55,050 --> 00:07:57,180 The squaring mechanism is flexible. 118 00:07:57,180 --> 00:08:03,420 We can, for example, query a component, a shelter component in our template and get a reference to 119 00:08:03,420 --> 00:08:04,770 the component instance. 120 00:08:04,950 --> 00:08:13,330 Or we can even query plain dumb elements, including component elements that is available via the Reid 121 00:08:13,350 --> 00:08:14,080 property. 122 00:08:14,310 --> 00:08:21,090 The key thing to bear in mind about the view child and children, is that this is a local querying mechanism 123 00:08:21,090 --> 00:08:26,010 so we can only query elements of the component template and nothing more. 124 00:08:26,220 --> 00:08:32,850 This means that the view child querying mechanism cannot see inside the templates of child components 125 00:08:32,850 --> 00:08:34,490 or parent components. 126 00:08:34,830 --> 00:08:39,720 It's really only meant to query the current component where we are using it.