1 00:00:03,880 --> 00:00:05,950 Hello, everyone, and welcome back. 2 00:00:06,290 --> 00:00:12,340 This lesson we're going to talk about the content child decorator, this decorator works in a very similar 3 00:00:12,340 --> 00:00:17,980 way to The View child operator, but it's used in the context of content projection. 4 00:00:18,100 --> 00:00:25,000 If you remember The View child and The View children, decorators were used in order to query the template 5 00:00:25,000 --> 00:00:31,150 of a given component so that the component class can have a direct reference to certain elements of 6 00:00:31,150 --> 00:00:32,439 its own template. 7 00:00:32,560 --> 00:00:38,440 The scope of this query was constrained to the template of the component and nothing else. 8 00:00:38,590 --> 00:00:43,600 We can query either components and get back the component instances of the template. 9 00:00:43,810 --> 00:00:50,830 We can query by a template reference name and we can even query a collection of elements using view 10 00:00:50,830 --> 00:00:51,540 children. 11 00:00:51,700 --> 00:00:57,910 Now, the same way that the component might want to get references to parts of its templates. 12 00:00:58,090 --> 00:01:04,269 We could also imagine situations where a component that supports content projection would also like 13 00:01:04,269 --> 00:01:09,080 to get references, for example, to the court's image or to the course description. 14 00:01:09,100 --> 00:01:16,750 So going here inside our course component, there could be used cases where here in the course of component 15 00:01:16,750 --> 00:01:22,080 class, we would like to get the direct reference to some of the projected content. 16 00:01:22,210 --> 00:01:27,580 If we switch here to the coursework component template, we are going to see that the projected content 17 00:01:27,580 --> 00:01:30,340 is here in save energy content. 18 00:01:30,340 --> 00:01:36,520 So we cannot give it a template reference and we cannot query based on the type of the component that 19 00:01:36,520 --> 00:01:43,220 will not work in order to convince ourselves that this would not work in the case of content projection. 20 00:01:43,390 --> 00:01:46,450 Let's quickly create here a template reference. 21 00:01:46,450 --> 00:01:52,900 We are going to call these coarse images and we are going to attempt to query discourse, image, template, 22 00:01:52,900 --> 00:01:56,470 reference from inside the course component. 23 00:01:56,530 --> 00:01:58,830 So let's add here a member variable. 24 00:01:58,840 --> 00:02:05,860 We are going to call it coarse image as well, and we are going to annotated with The View child decorator 25 00:02:06,070 --> 00:02:06,940 to the decorator. 26 00:02:06,940 --> 00:02:09,490 We are going to pass a string course image. 27 00:02:09,490 --> 00:02:13,990 And this contains the name of the template reference that we are trying to query. 28 00:02:14,120 --> 00:02:20,150 So we are going to rename this to Image so that we are sure that we understand that it's indeed the 29 00:02:20,170 --> 00:02:22,750 template reference name that we are querying. 30 00:02:22,900 --> 00:02:27,050 If we know implement here the after review, we need Life-cycle Hook. 31 00:02:27,070 --> 00:02:33,640 We are going to have here a method that we can use to print out to the screen the value of this image 32 00:02:33,650 --> 00:02:34,560 member variable. 33 00:02:34,690 --> 00:02:36,150 So let's do that. 34 00:02:36,160 --> 00:02:39,240 Let's see what results do we get here in the console. 35 00:02:39,460 --> 00:02:46,200 And remember, we are trying to query something that is inside this engy content tag reinspect here 36 00:02:46,200 --> 00:02:47,050 to the console. 37 00:02:47,080 --> 00:02:51,100 We are going to see that we get here an undefined value. 38 00:02:51,100 --> 00:02:54,520 So we get here actually two times undefined. 39 00:02:54,520 --> 00:03:00,520 And this is because we are defining here to cards to get a cleaner log for the rest of the section. 40 00:03:00,730 --> 00:03:04,980 Let's remove here the logging statements that we have, of course, view. 41 00:03:05,110 --> 00:03:11,650 Let's switch over here to the application component and let's for the moment remove the second card. 42 00:03:11,800 --> 00:03:17,080 So if we now reload here, our application, we are going to see that we get here undefined. 43 00:03:17,080 --> 00:03:23,320 So we are trying to bring it out here, our image element, and we get undefined, which means that 44 00:03:23,320 --> 00:03:25,830 the view child query did not work. 45 00:03:26,050 --> 00:03:32,680 This is working as expected because the View decorator can only query elements that are visible here 46 00:03:32,680 --> 00:03:38,680 inside the templates, but it cannot see here inside the projected contents. 47 00:03:38,860 --> 00:03:45,190 In order to see inside the projected contents, we are going to need a new decorator called Contant 48 00:03:45,190 --> 00:03:45,880 Child. 49 00:03:45,880 --> 00:03:49,660 So this works in a very similar way to view child. 50 00:03:49,660 --> 00:03:56,320 But the query only covers the projected contents, so this cannot be used to query other elements of 51 00:03:56,320 --> 00:03:57,010 the template. 52 00:03:57,220 --> 00:03:58,780 Let's have a look at this in action. 53 00:03:58,930 --> 00:04:03,520 If we reload here our application and have a look here at the console, what do we see? 54 00:04:03,520 --> 00:04:07,570 That our content shall work correctly as expected. 55 00:04:07,570 --> 00:04:13,230 So we can see that we got here a reference to the course image, native DOM element. 56 00:04:13,450 --> 00:04:17,050 Now, let's talk about the scope of the content child query. 57 00:04:17,170 --> 00:04:20,320 Let's go here to our course card component template. 58 00:04:20,320 --> 00:04:24,250 And we're going to create here a new template reference. 59 00:04:24,250 --> 00:04:26,590 We are going to call this our container. 60 00:04:26,590 --> 00:04:30,070 So this is the device that is wrapping the whole template. 61 00:04:30,070 --> 00:04:37,060 Let's try to query a reference to these div using the same mechanism we are going to replace here image 62 00:04:37,060 --> 00:04:39,960 with container and let's see what we get here. 63 00:04:40,270 --> 00:04:42,640 So as we can see, we get undefined. 64 00:04:42,760 --> 00:04:50,260 So this means that the scope of the content child query is restricted to what we have here, inside 65 00:04:50,260 --> 00:04:53,200 engie content or another way of seeing it. 66 00:04:53,230 --> 00:05:00,280 The scope of the content shell query is restricted to the content part of the component. 67 00:05:00,570 --> 00:05:06,360 The content childcare, he cannot see anything else in the parent template, it could not see, for 68 00:05:06,360 --> 00:05:13,270 example, here the top menu, it cannot also see anything else inside the card component. 69 00:05:13,320 --> 00:05:20,610 The only thing that the content child care you can see is the content part of the component instance 70 00:05:20,610 --> 00:05:21,570 in question. 71 00:05:21,690 --> 00:05:24,960 And these, to be more specific, is what we have highlighted here. 72 00:05:25,110 --> 00:05:31,890 It's the complete content that we can see between the opening tag of this component instance and the 73 00:05:31,890 --> 00:05:32,880 closing tag. 74 00:05:33,030 --> 00:05:39,960 Just like the case of The View child query, the content shell decorator can also be used to query components 75 00:05:39,960 --> 00:05:42,510 inside the content of the component. 76 00:05:42,660 --> 00:05:45,840 As we can see here, we don't have any component to query. 77 00:05:45,840 --> 00:05:48,150 These are just plain dumb elements. 78 00:05:48,240 --> 00:05:54,000 So let's quickly have over to the command line and create a new component that we're going to add here. 79 00:05:54,120 --> 00:06:00,240 We are going to do engy generate components and we are going to create here a component called simply 80 00:06:00,240 --> 00:06:01,730 cause dash image. 81 00:06:01,830 --> 00:06:04,610 This is going to generate here a couple of files. 82 00:06:04,770 --> 00:06:07,220 This is already configured and ready to use. 83 00:06:07,230 --> 00:06:13,500 We are going to open this specific file here, the course image component, that HTML file. 84 00:06:13,740 --> 00:06:21,360 And here inside this component, we are going to paste in content of this div here, the course dash 85 00:06:21,360 --> 00:06:22,410 image div. 86 00:06:22,560 --> 00:06:27,060 So this is going to be the template of our course image component. 87 00:06:27,060 --> 00:06:31,620 And as we can see, this course image needs here an image Eurail. 88 00:06:31,620 --> 00:06:38,450 So let's quickly create here an image URL property that we are going to add here to our component. 89 00:06:38,580 --> 00:06:44,190 We are going to head over here to the exploratory and we're going to open here the course image component 90 00:06:44,190 --> 00:06:44,730 file. 91 00:06:44,730 --> 00:06:47,010 Let's create here a new property. 92 00:06:47,010 --> 00:06:51,030 We are going to add the input decorator just like before. 93 00:06:51,030 --> 00:06:54,230 And we are going to create here an image. 94 00:06:54,240 --> 00:06:55,580 You are property. 95 00:06:55,620 --> 00:06:59,310 We are going to add here a member variable of type string. 96 00:06:59,310 --> 00:07:04,100 And we're going to take a moment to demonstrate a new feature of that input. 97 00:07:04,110 --> 00:07:10,920 So if we want our property to be named something else other than image URL, we can specify the alternative 98 00:07:10,920 --> 00:07:11,580 name here. 99 00:07:11,590 --> 00:07:17,970 So let's name this input properties simply as SIRC standing for source. 100 00:07:18,150 --> 00:07:24,570 Now we are going to head over here to our application component and we are going to add here a course. 101 00:07:24,570 --> 00:07:28,140 In this instance, we are going to fill in the source. 102 00:07:28,140 --> 00:07:32,790 You are a property with the image of the course instance. 103 00:07:33,000 --> 00:07:35,490 Let's try out this new version of the program. 104 00:07:35,490 --> 00:07:39,210 And as we can see, we don't have a coarse image anymore. 105 00:07:39,330 --> 00:07:44,400 If we switch over here to the implementation of the course cart component, we are going to see that 106 00:07:44,400 --> 00:07:47,880 we were querying the image based on this Cyesis class. 107 00:07:48,030 --> 00:07:55,170 So instead of doing our query based on the Cyesis class that is no longer present, let's do this selection 108 00:07:55,170 --> 00:08:02,100 here by querying on the course image element that we have here in our application component. 109 00:08:02,130 --> 00:08:08,280 So this query this time around is going to catch this element and the element is going to be projected 110 00:08:08,280 --> 00:08:09,690 here on the screen. 111 00:08:09,870 --> 00:08:12,510 We can see that we don't get here any image. 112 00:08:12,510 --> 00:08:18,870 And that's because what we need to parsing here is the icon URL property and not image WORRILL. 113 00:08:18,870 --> 00:08:26,310 So as you can see now, we are getting here the course image components getting projected inside another 114 00:08:26,310 --> 00:08:28,740 component, the Corsair component. 115 00:08:28,740 --> 00:08:35,150 This component here that we have highlighted is showing up here in the template of the course curve 116 00:08:35,159 --> 00:08:37,370 at this position right here. 117 00:08:37,559 --> 00:08:41,669 Now, let's have a look at the result of our content child query. 118 00:08:41,690 --> 00:08:44,130 So we were wearing here the container. 119 00:08:44,159 --> 00:08:47,220 Let's try to query the course image component. 120 00:08:47,430 --> 00:08:54,060 We are going to do so not by querying a template reference, but we are going to pass in here a component 121 00:08:54,060 --> 00:08:54,780 class. 122 00:08:54,780 --> 00:08:58,080 So we are going to pass in here cause image component. 123 00:08:58,140 --> 00:08:59,790 We are going to see that now. 124 00:08:59,790 --> 00:09:04,830 The content query is going to give us back the instance of the component. 125 00:09:04,920 --> 00:09:10,350 If we chequing in the console what we have here printed out in Engy after viewing it, we're going to 126 00:09:10,350 --> 00:09:15,600 see that we have indeed an instance of a course image component as expected. 127 00:09:15,600 --> 00:09:22,920 So as we can see, content can be used to query template references here in the content part of the 128 00:09:22,920 --> 00:09:28,770 component instance, and it can also be used to query component instances directly. 129 00:09:28,770 --> 00:09:32,310 So this is very similar to what was happening with view gelled. 130 00:09:32,340 --> 00:09:39,660 We can query by element, we can query the native DOM element and we can query the component instance 131 00:09:39,840 --> 00:09:42,360 in a very similar way to view child. 132 00:09:42,360 --> 00:09:50,130 If we want to grab here a hold of the native DOM element of the coarse image tag that we have here instead 133 00:09:50,130 --> 00:09:53,400 of the component instance can do so in the following way. 134 00:09:53,400 --> 00:09:59,490 We are going to jump here into the course component and we are going to change here the default behavior 135 00:09:59,490 --> 00:10:00,420 of our query. 136 00:10:00,500 --> 00:10:05,930 So if we are trying to grab a component by default, we are going to grab the component instance, but 137 00:10:05,930 --> 00:10:13,260 we can specify here the property and say that we want to grab the element reference instead. 138 00:10:13,280 --> 00:10:19,610 So this time around, if we try this, we are going to see that the result of this query is the native 139 00:10:19,610 --> 00:10:23,580 DOM element of this particular course image components. 140 00:10:23,590 --> 00:10:30,110 So if we highlight here the coarse image element, we are seeing that it corresponds here to the image. 141 00:10:30,290 --> 00:10:36,010 And as we can see here in the console, what we get back is the element reference itself. 142 00:10:36,170 --> 00:10:37,870 We cover the lot in this lesson. 143 00:10:37,880 --> 00:10:39,500 So let's quickly summarize. 144 00:10:39,500 --> 00:10:40,960 We have covered the content. 145 00:10:40,970 --> 00:10:42,260 Shall decorate that. 146 00:10:42,740 --> 00:10:49,160 We should only use this decorator if we are in a situation where our component is using content projection. 147 00:10:49,370 --> 00:10:56,000 And by some reason we need to grab a reference to some of the content in our component class. 148 00:10:56,030 --> 00:11:00,100 Next, we are going to conclude the section on content projection. 149 00:11:00,110 --> 00:11:03,320 We are going to talk about the content children decorated.