1 00:00:04,000 --> 00:00:10,240 Hello, everyone, and welcome in this lesson, we are going to introduce the notion of content protection 2 00:00:10,360 --> 00:00:12,580 before diving into content protection. 3 00:00:12,580 --> 00:00:14,500 Let's make here a small change. 4 00:00:14,620 --> 00:00:16,570 As you can see, we are accessing here. 5 00:00:16,570 --> 00:00:18,490 The course is zero array. 6 00:00:18,580 --> 00:00:25,660 An alternative way of doing this is to use NGF to create analogies for this expression so we can take, 7 00:00:25,660 --> 00:00:28,030 for example, this expression here. 8 00:00:28,120 --> 00:00:35,110 We based it inside NGF and we can create an alternative name for the evaluation of this expression using 9 00:00:35,110 --> 00:00:36,580 that as Syntex. 10 00:00:36,590 --> 00:00:44,140 So as you can see, the course is zero expression easily used here to coarse, so I can parsing this 11 00:00:44,140 --> 00:00:48,220 course variable here directly to the course property. 12 00:00:48,340 --> 00:00:52,510 Now let's give a quick example of what exactly is content. 13 00:00:52,510 --> 00:00:57,520 Projection content projection is all about making configurable components. 14 00:00:57,550 --> 00:01:03,100 So here, if we jump into our course car components, we are going to see that the template of this 15 00:01:03,100 --> 00:01:04,709 component is fixed. 16 00:01:04,720 --> 00:01:11,090 We can show or hide certain parts of the template using energy if we can alternate between multiple 17 00:01:11,120 --> 00:01:14,590 possibilities here in our course category property. 18 00:01:14,710 --> 00:01:18,640 But in general, the template of these components is fixed. 19 00:01:18,820 --> 00:01:24,850 But for example, it's possible that instead of displaying here an image, we would like to display 20 00:01:24,850 --> 00:01:27,100 something else that represents the course. 21 00:01:27,280 --> 00:01:34,390 Maybe we would like to display here some interactive element with some buttons so we might want to display 22 00:01:34,390 --> 00:01:37,720 here other things other than a plain image. 23 00:01:37,810 --> 00:01:45,400 And right now, this component does not offer the possibility of changing this image by something else. 24 00:01:45,410 --> 00:01:51,040 I really would like to be able to provide the image as an input here to the component. 25 00:01:51,190 --> 00:01:52,810 Let's see how we can do that. 26 00:01:52,930 --> 00:01:57,300 We are going to start by extracting from this template the image tag. 27 00:01:57,490 --> 00:02:01,660 Let's just take the plane tag without anything else. 28 00:02:01,690 --> 00:02:04,550 We're going to switch over here to our application component. 29 00:02:04,570 --> 00:02:09,910 So right now, if we will restart the application, we will have nothing displayed here in place of 30 00:02:09,910 --> 00:02:10,539 the image. 31 00:02:10,750 --> 00:02:17,340 What we would like to do is to pass this image as a configuration element of the course card component. 32 00:02:17,350 --> 00:02:24,090 We would like to place the image somewhere here in the content part of the course car tag. 33 00:02:24,100 --> 00:02:27,790 So we have here the open course car tag we have here. 34 00:02:27,790 --> 00:02:32,250 The close tag somewhere in the middle is the content pilot. 35 00:02:32,290 --> 00:02:36,280 This is configuration that we are passing to the cursor element. 36 00:02:36,280 --> 00:02:42,820 In this case, we are passing here at course image and we are already filling it in with the course, 37 00:02:42,820 --> 00:02:48,330 the icon URL property, which is coming here from our elia's variable. 38 00:02:48,400 --> 00:02:52,330 So now we are passing the image as configuration. 39 00:02:52,460 --> 00:02:58,960 The question now is how can the course card components grab a hold of this image and display in its 40 00:02:58,960 --> 00:02:59,730 templates? 41 00:02:59,740 --> 00:03:04,880 Well, we can do that by using the energy content tag from angular core. 42 00:03:04,990 --> 00:03:11,320 So with this tag, we are going to be able to project the content that we have available here in the 43 00:03:11,320 --> 00:03:13,780 content part of the component. 44 00:03:13,900 --> 00:03:15,310 Let's see this in action. 45 00:03:15,310 --> 00:03:21,580 If we now reload, lower the application, we are going to see that we get again the same image here 46 00:03:21,610 --> 00:03:22,600 as expected. 47 00:03:22,780 --> 00:03:28,750 Now we understand the name for this feature content projection, because what is happening here is that 48 00:03:28,750 --> 00:03:36,220 the content that we have here inside our cursor tag is being effectively projected into the template 49 00:03:36,220 --> 00:03:37,750 using energy content. 50 00:03:37,840 --> 00:03:44,860 And notice that if we add here some other content, such as, for example, let's say an H5 taxing the 51 00:03:44,860 --> 00:03:51,790 total number of lessons of this particular course, if we will refresh here, our application, we are 52 00:03:51,790 --> 00:03:54,280 going to see that we now get here. 53 00:03:54,280 --> 00:03:59,590 This content also projected into the course card component templates. 54 00:03:59,590 --> 00:04:06,790 So any content that we have here between the opening and closing tag of the course card component is 55 00:04:06,790 --> 00:04:11,050 going to get projected here in the template using energy content. 56 00:04:11,050 --> 00:04:18,790 If we head over here and we add a second care component, let's say that we have here a different course 57 00:04:18,790 --> 00:04:25,210 card that is going to access not the same course that we are accessing here, but we are going to access 58 00:04:25,210 --> 00:04:31,300 here a different course of our courses array, let's say the second course, and we don't provide any 59 00:04:31,300 --> 00:04:31,780 image. 60 00:04:31,780 --> 00:04:34,630 Let's say that the total number of lessons is ten. 61 00:04:34,630 --> 00:04:35,770 Do not try this out. 62 00:04:35,770 --> 00:04:41,920 We are going to see that we have here two cards, the first car, the head, the image and the total 63 00:04:41,920 --> 00:04:44,140 of lessons correctly predicted here. 64 00:04:44,230 --> 00:04:51,520 But this second can, because we did not specify here an image, only had the total license projected. 65 00:04:51,610 --> 00:04:59,230 So energy content by default is going to take anything that is in the content part of our component, 66 00:04:59,410 --> 00:05:00,280 anything that is. 67 00:05:00,660 --> 00:05:06,590 The opening and the closing tag of the component, and it's going to be rejected here inside the template 68 00:05:06,810 --> 00:05:10,470 now in some situations, these might be exactly what we want. 69 00:05:10,470 --> 00:05:17,250 We want to project everything that we have here in the content part, inside one particular slot in 70 00:05:17,250 --> 00:05:17,970 the template. 71 00:05:17,980 --> 00:05:24,120 But there are many other situations where we would only like to do a partial projection of the content 72 00:05:24,120 --> 00:05:24,980 that we have here. 73 00:05:25,080 --> 00:05:31,710 For example, probably here at the level of the image, we would only like to select here the image 74 00:05:31,710 --> 00:05:36,280 so that we projected here inside the curve and we ignore everything else. 75 00:05:36,330 --> 00:05:42,440 So in order to do that, we can use the select property of the energy content tag here. 76 00:05:42,480 --> 00:05:47,890 We can pass in a Cyesis selector that is going to restrain what gets projected. 77 00:05:47,900 --> 00:05:50,670 Let's say that we only want to predict the image. 78 00:05:50,700 --> 00:05:57,960 So as you can see now, we are only projecting the image in this projection slot and not the total number 79 00:05:57,960 --> 00:06:04,590 of lessons of the course besides being able to project based on the element type, we can also restrict 80 00:06:04,590 --> 00:06:11,070 the content that we want to project using a science class, for example, let's add here a science class 81 00:06:11,070 --> 00:06:12,580 named course image. 82 00:06:12,840 --> 00:06:17,480 This is being applied here to an image, but it could potentially be applied to a container. 83 00:06:17,490 --> 00:06:25,560 Let's say that we have here a container div that would contain the image and the container would have 84 00:06:25,560 --> 00:06:26,880 the Cyesis glass. 85 00:06:26,910 --> 00:06:32,480 So we would like to project the complete container that we have here into the image slot. 86 00:06:32,520 --> 00:06:38,260 We can do so by projecting based on the presence of this first class. 87 00:06:38,310 --> 00:06:44,460 So here in our selected property, we are going to select based on this Cyesis class. 88 00:06:44,610 --> 00:06:49,450 And as we can see, our image is being correctly projected as expected. 89 00:06:49,470 --> 00:06:54,290 I've noticed that this time around the total number of lessons was not projected. 90 00:06:54,300 --> 00:06:56,530 We only projected the image. 91 00:06:56,760 --> 00:07:03,450 This means that not only we can use elements, selectors and Cyesis selectors to specify the content 92 00:07:03,450 --> 00:07:05,640 that we want to associate to a given slot. 93 00:07:05,640 --> 00:07:11,850 But we can also apply this to container elements that contain multiple elements inside it. 94 00:07:11,870 --> 00:07:17,640 So if we move inside this course, this container, the total number of lessons, we are going to see 95 00:07:17,640 --> 00:07:20,970 that this is also getting projected as expected. 96 00:07:21,120 --> 00:07:24,890 Energy content also supports multi Slote projection. 97 00:07:24,950 --> 00:07:30,930 Let's say that, for example, we would like to not only project here the content of the image, but 98 00:07:30,930 --> 00:07:34,540 we would also like to project the content of the description. 99 00:07:34,680 --> 00:07:36,170 Let's see, how can we do that? 100 00:07:36,180 --> 00:07:40,380 We are going to start by removing the description here from the template. 101 00:07:40,530 --> 00:07:42,860 This will no longer be a constant element. 102 00:07:42,900 --> 00:07:46,710 This is going to be a configurable element via content projection. 103 00:07:46,800 --> 00:07:52,850 We're going to start by adding here the course description to the content part of our course. 104 00:07:53,340 --> 00:07:59,770 So notice that now we have here two top level elements at the level of the content part of this scale. 105 00:07:59,790 --> 00:08:03,120 We have course image and a course description. 106 00:08:03,300 --> 00:08:10,130 If we try this out as it is, we are going to see that we no longer have here any description present. 107 00:08:10,230 --> 00:08:16,860 We can add it back to the template by projecting it based on the course description cyesis class. 108 00:08:16,890 --> 00:08:20,290 So we are going to have over here to our course template. 109 00:08:20,310 --> 00:08:23,280 We are going to add a second engie content tag. 110 00:08:23,280 --> 00:08:29,970 And here in the select property we are going to specify the course description CSS class. 111 00:08:29,980 --> 00:08:34,679 And as we can see now, the description is being projected as expected. 112 00:08:34,770 --> 00:08:37,460 Now we're going back here to our application component. 113 00:08:37,470 --> 00:08:44,550 Let's say that we will have here in the content part of this particular card some extra content here 114 00:08:44,700 --> 00:08:51,120 that does not match either the course image, the selector or the course description selector. 115 00:08:51,150 --> 00:08:56,700 Let's say that we have here some extra content, such as, for example, a text area that would allow 116 00:08:56,700 --> 00:08:58,770 us to edit the course description. 117 00:08:58,860 --> 00:09:04,860 If we not try this out, we are going to see that this part of the content is not getting presented 118 00:09:04,860 --> 00:09:06,920 to the card as we would expect. 119 00:09:06,930 --> 00:09:14,610 But let's say that we would like to add here another content projection slot that takes everything that 120 00:09:14,610 --> 00:09:17,370 does not match any of the existing selectors. 121 00:09:17,520 --> 00:09:23,460 So let's say that here in this engy content slot, we would like to project everything that does not 122 00:09:23,460 --> 00:09:27,300 match either the course image or the course description. 123 00:09:27,330 --> 00:09:31,560 CSC selectors, which would correspond to this text area here. 124 00:09:31,710 --> 00:09:38,970 We can project this is a reminder content by simply applying here the engie content tag without any 125 00:09:38,970 --> 00:09:40,150 select properties. 126 00:09:40,170 --> 00:09:42,360 So if we try out, we are going to see that. 127 00:09:42,360 --> 00:09:49,260 Now we have here the added description field projected here in these last projection slot. 128 00:09:49,560 --> 00:09:55,380 Let's summarize everything that we have learned so far regarding content, projection, content projection 129 00:09:55,380 --> 00:09:58,500 is all about making configurable components. 130 00:09:58,650 --> 00:10:00,120 We can customize the look in. 131 00:10:00,120 --> 00:10:06,840 The feel of a component via content projection by providing some content to the component that is then 132 00:10:06,840 --> 00:10:11,260 going to be projected and become a part of the component template. 133 00:10:11,400 --> 00:10:16,500 These can be then purely with the energy content tag at the level of the component template. 134 00:10:16,660 --> 00:10:23,610 But sometimes we also need a programmatic reference to the projected content at the level of our component 135 00:10:23,610 --> 00:10:24,190 class. 136 00:10:24,240 --> 00:10:31,380 Let's now learn how can we obtain references to our projected content using content, child and content? 137 00:10:31,410 --> 00:10:35,070 Children, this is coming right up in the next lesson.