1 00:00:04,000 --> 00:00:06,070 Hello, everyone, and welcome back. 2 00:00:06,310 --> 00:00:12,610 In the last couple of lessons, we have learned how to create an energy template tag, which wraps a 3 00:00:12,610 --> 00:00:13,990 partial template. 4 00:00:14,110 --> 00:00:19,120 We have learned how to give this template an input context, and we have learned how to instantiate 5 00:00:19,120 --> 00:00:26,530 the template using engie template outlet and the context variable in order to learn that we were instantiating 6 00:00:26,530 --> 00:00:29,830 the template here directly in our application component. 7 00:00:29,920 --> 00:00:33,000 But this is not how this template is meant to be used. 8 00:00:33,010 --> 00:00:40,100 Let's delete this and let's instead pass this template to our course card as an input parameter. 9 00:00:40,120 --> 00:00:46,330 So what we are going to do is we are going to create here an input variable that we are going to call 10 00:00:46,330 --> 00:00:48,490 no image templates. 11 00:00:48,520 --> 00:00:54,910 We are then going to fill in the value of this input property by passing in here a reference to this 12 00:00:54,910 --> 00:01:00,060 blank image template partial that we have here now in our course car component. 13 00:01:00,070 --> 00:01:05,530 What we're going to do is we are going to receive here this template as an input variable. 14 00:01:05,680 --> 00:01:12,910 So we are going to define here a variable with name no image TPL and we are going to define it as being 15 00:01:12,910 --> 00:01:15,270 of type, template reference. 16 00:01:15,280 --> 00:01:17,440 We need to provide here a parameter type. 17 00:01:17,440 --> 00:01:23,710 Let's provide the any parameter we have here, a reference to this template and we can now use this 18 00:01:23,710 --> 00:01:31,450 template here in our course card component here inside our cursor template we were already having here 19 00:01:31,450 --> 00:01:35,880 and else close for the case when we don't have here an image available. 20 00:01:35,890 --> 00:01:38,640 So let's apply here to the same principle. 21 00:01:38,680 --> 00:01:40,770 We are going to define here a template. 22 00:01:40,780 --> 00:01:42,240 Let's give it a different name. 23 00:01:42,250 --> 00:01:48,490 We going to call it no image and we are going to add it here to our course curve component template. 24 00:01:48,490 --> 00:01:52,230 Let's add here a reference and let's call it no image. 25 00:01:52,240 --> 00:01:58,640 So what happens here is that if we have here and I can Eurail property, we are going to use the coarse 26 00:01:58,660 --> 00:02:01,620 image that we are passing as an input to this component. 27 00:02:01,630 --> 00:02:06,760 Otherwise, we are going to instantiate here this template now inside this template. 28 00:02:06,760 --> 00:02:14,110 What we want to do is we want to instantiate the content that we have received here and we want to pass 29 00:02:14,110 --> 00:02:21,730 in as input the course object so that the course data is available here and we can see the course name 30 00:02:21,730 --> 00:02:22,540 on the screen. 31 00:02:22,690 --> 00:02:28,840 The way that we can instantiate this template reference that we have received here is by using engie 32 00:02:28,840 --> 00:02:30,150 template outlet. 33 00:02:30,190 --> 00:02:37,540 So let's add here and engie container tag so that we have a hook to apply these engie template outlet 34 00:02:37,540 --> 00:02:38,920 structural directive. 35 00:02:38,920 --> 00:02:41,440 We are going to apply here the style syntax. 36 00:02:41,440 --> 00:02:43,470 Otherwise this will not work. 37 00:02:43,480 --> 00:02:48,850 We are going to define what template do we want to instantiate using engie template outlet. 38 00:02:48,850 --> 00:02:55,270 In this case, we want to instantiate here the template that we have received as input and we can already 39 00:02:55,270 --> 00:02:56,030 try this out. 40 00:02:56,050 --> 00:03:01,570 So if we reload the application, we are going to see that our template that we have passed in here 41 00:03:01,570 --> 00:03:07,990 is an input to the component is already being instantiated inside, of course, CURTH components. 42 00:03:07,990 --> 00:03:12,300 So we have declared here a template with its own isolated context. 43 00:03:12,340 --> 00:03:15,690 We have not used it here in our application component. 44 00:03:15,850 --> 00:03:20,710 Instead, we have passed it as an input into the crosscourt component. 45 00:03:20,830 --> 00:03:27,430 The cursor component then has here an input variable of type template Gorev, which can be used here 46 00:03:27,430 --> 00:03:32,860 at the level of the template doing Stasch, yet the template reference that was passed in. 47 00:03:32,860 --> 00:03:35,680 So we are using here engie template outlet. 48 00:03:35,680 --> 00:03:42,400 We are passing the name of the variable no image DPL that corresponds to this input variable here. 49 00:03:42,520 --> 00:03:47,710 And we are passing this to Engy template outlet which is instantiated here. 50 00:03:47,710 --> 00:03:50,830 The template that we have received as configuration. 51 00:03:50,890 --> 00:03:54,570 Notice that the name of the course is not being printed out here. 52 00:03:54,850 --> 00:03:58,630 For that, we are going to need to fill in here the context property. 53 00:03:58,640 --> 00:04:01,320 So again, this is a plain JavaScript object. 54 00:04:01,330 --> 00:04:08,330 We are going to fill in the description property here and we are going to pass it these value here, 55 00:04:08,330 --> 00:04:14,080 because that description, if we now try this out, we are going to see that this time around, the 56 00:04:14,080 --> 00:04:20,890 name of the course is being printed out to the screen, meaning that it's available here inside the 57 00:04:20,890 --> 00:04:22,570 instantiated template. 58 00:04:22,570 --> 00:04:26,920 And we these we have seen how many of these features interact together. 59 00:04:26,920 --> 00:04:33,190 We have seen here an example of how engy container, engie, template, outlet, engie, template and 60 00:04:33,190 --> 00:04:37,750 input variables can create a component that is very customizable. 61 00:04:37,750 --> 00:04:43,990 Notice that this component is receiving here a template as an input parameter, and it's also receiving 62 00:04:43,990 --> 00:04:47,380 here part of its content via content projection. 63 00:04:47,390 --> 00:04:51,610 And with this we have completed our section on angular templates. 64 00:04:51,610 --> 00:04:54,850 What we are going to cover next is angular directive's. 65 00:04:54,850 --> 00:05:00,280 We are going to learn how to build our own custom directives, such as, for example, the engie. 66 00:05:00,710 --> 00:05:05,390 Or if DirecTV, this is coming right up in the next section.