1 00:00:03,940 --> 00:00:09,640 Hello, everyone, and welcome back in this lesson, we're going to continue to dive deeper into the 2 00:00:09,640 --> 00:00:16,300 engy template tag that we covered on the last lesson, we are going to learn about the engie template 3 00:00:16,300 --> 00:00:17,590 very well context. 4 00:00:17,770 --> 00:00:24,100 And we're going to learn how to instantiate templates using the structural detective engie template 5 00:00:24,100 --> 00:00:24,850 outlet. 6 00:00:24,850 --> 00:00:31,530 As we have seen in Save Energy template, we can access variables in the external context of the template 7 00:00:31,810 --> 00:00:36,990 so we can access here the course variable that belongs to the Coast Guard component. 8 00:00:37,000 --> 00:00:42,730 Let's now learn how to give to the template its own private variable context that is going to be visible 9 00:00:42,730 --> 00:00:44,950 only inside the template itself. 10 00:00:45,190 --> 00:00:52,060 The ability to give to each template tag its own context, where we can pass data that is specific to 11 00:00:52,060 --> 00:00:57,550 a particular template, for instance, is essential in order for making the template reusable. 12 00:00:57,670 --> 00:01:03,760 Because another key characteristic of engie template is that we can define a template in one component 13 00:01:03,760 --> 00:01:10,970 and then pass it as input to other components by filling in the context of the template as we need. 14 00:01:11,110 --> 00:01:12,130 Let's give an example. 15 00:01:12,130 --> 00:01:17,800 We're going to take this template here of the blank image and we're going to pass it as an input here 16 00:01:17,800 --> 00:01:19,350 to the course curve component. 17 00:01:19,400 --> 00:01:27,190 Let's first extract here from these components the template and let's move it here to our application 18 00:01:27,190 --> 00:01:27,760 component. 19 00:01:27,770 --> 00:01:33,700 So here is the component where we are creating this curve that we see here on the screen. 20 00:01:33,820 --> 00:01:38,310 We're going to paste in here our blank image engie template. 21 00:01:38,410 --> 00:01:45,040 Now we are going to give to this template a context and noticed that after refreshing the application, 22 00:01:45,040 --> 00:01:48,030 we can see here that the blank image is gone. 23 00:01:48,040 --> 00:01:48,970 This is normal. 24 00:01:49,000 --> 00:01:55,540 This is because we have moved this a block of code that shows the image here to our application component 25 00:01:55,540 --> 00:01:56,140 e-mail. 26 00:01:56,260 --> 00:02:02,260 And now we only have here the definition of the template, but we are not effectively using the template 27 00:02:02,260 --> 00:02:04,070 anywhere in our code. 28 00:02:04,090 --> 00:02:10,090 So in order to define a context here to our template, we are going to be using the following syntax. 29 00:02:10,240 --> 00:02:16,150 We're going to add here a new variable called Course Name, and we are going to declare it here as an 30 00:02:16,150 --> 00:02:23,410 input for the template using the key word, a dash and then the camel case name of the variable in this 31 00:02:23,410 --> 00:02:24,790 case, of course, name. 32 00:02:24,910 --> 00:02:31,480 So if we would have here a second or third variables or more, we could have them here using the same 33 00:02:31,480 --> 00:02:33,730 syntax with the length keyword. 34 00:02:33,760 --> 00:02:40,810 Now we have here a variable that we can use here inside our template and we can use it here instead, 35 00:02:40,810 --> 00:02:42,760 of course, that description. 36 00:02:42,880 --> 00:02:46,270 Now, let's see, how can we fill in this variable? 37 00:02:46,480 --> 00:02:51,070 Let's try to fill it in by directly instantiating the template. 38 00:02:51,070 --> 00:02:58,670 A template can be very easily instantiated using the engie template outlet structural directive. 39 00:02:58,690 --> 00:03:03,870 So let's try to instantiate the template inside div tag to start. 40 00:03:04,000 --> 00:03:08,590 Let's apply the structural that we have the energy template directive. 41 00:03:08,590 --> 00:03:15,670 We need the star here, just like the case of NGF and energy for and we are going to define here what 42 00:03:15,670 --> 00:03:17,790 template do we want to instantiate. 43 00:03:17,830 --> 00:03:22,480 So in this case, we want to instantiate here the blank image template. 44 00:03:22,480 --> 00:03:28,870 And in order to make this more visible on the screen, let's have here a couple of horizontal separators 45 00:03:28,870 --> 00:03:29,970 and try this out. 46 00:03:29,980 --> 00:03:36,790 So as you can see, we are not yet passing in the template as an input parameter here of the course 47 00:03:36,800 --> 00:03:37,200 curve. 48 00:03:37,240 --> 00:03:39,010 We are going to do that later. 49 00:03:39,040 --> 00:03:45,730 Right now, we are simply trying to define a template with an input context and we are trying to instantiate 50 00:03:45,730 --> 00:03:48,700 the template using engie template outlet. 51 00:03:48,760 --> 00:03:55,420 And as we can see here above the horizontal separator words we have here, the blank image template 52 00:03:55,420 --> 00:03:56,700 instantiated. 53 00:03:56,710 --> 00:04:02,140 But notice that this context variable here, of course, name is not filled in. 54 00:04:02,170 --> 00:04:06,280 We have just created the template, but with a blank context. 55 00:04:06,460 --> 00:04:13,060 In order to fill in this template instance with a context, we are going to be providing here a context 56 00:04:13,060 --> 00:04:17,380 object using this syntax in engie template outlet. 57 00:04:17,589 --> 00:04:21,670 We now need to fill in the context object with the data that we need. 58 00:04:21,760 --> 00:04:26,450 So let's create here one extra property and we are going to give it a different name. 59 00:04:26,470 --> 00:04:32,770 We are going to call it description and we are going to fill it in with the course description using 60 00:04:32,770 --> 00:04:34,630 here the course object. 61 00:04:34,750 --> 00:04:38,620 So we are passing discourse description to the template. 62 00:04:38,710 --> 00:04:44,410 Now notice that if we try this out, just like it is without any further modification, we can see that 63 00:04:44,410 --> 00:04:47,800 we are still not accessing here the data that we need. 64 00:04:47,950 --> 00:04:49,970 OK, so how do we access it? 65 00:04:50,050 --> 00:04:56,260 We know that we have here a variable called course name that is not being currently populated in order 66 00:04:56,260 --> 00:04:57,340 to populate it. 67 00:04:57,340 --> 00:05:00,400 We are going to assign here a value to the. 68 00:05:00,490 --> 00:05:07,580 Course name, and we are going to have here a JavaScript expression now this expression here passed 69 00:05:07,690 --> 00:05:15,310 on the left variable definition of the input variable of the template is going to be evaluated not against 70 00:05:15,310 --> 00:05:20,620 the application component class itself, like it was the case here with course that I can use. 71 00:05:21,100 --> 00:05:25,060 This is being evaluated here against the application component class. 72 00:05:25,210 --> 00:05:30,570 These are that expression instead is going to be evaluated using the context objects. 73 00:05:30,580 --> 00:05:37,210 So if we access here the description property, this is effectively calling the description property 74 00:05:37,210 --> 00:05:39,900 of the context object itself. 75 00:05:40,030 --> 00:05:44,980 If we now try this out and we refresh the application, we are going to see that now. 76 00:05:44,980 --> 00:05:51,430 The name of the course is accessible inside the template, the same way that we have instantiated here 77 00:05:51,550 --> 00:05:56,970 one instance of the blank image template we can have here a second instance. 78 00:05:56,980 --> 00:06:02,570 So let's copy these and let's fill in the second instance with a different context. 79 00:06:02,620 --> 00:06:09,580 So instead of accessing here the course local variable, let's access here another position in the courses 80 00:06:09,580 --> 00:06:10,050 array. 81 00:06:10,060 --> 00:06:12,790 We are going to access, for example, the first position. 82 00:06:12,790 --> 00:06:15,880 And if we try this out, we are going to see that this time around. 83 00:06:15,880 --> 00:06:21,810 We have here two instances of the template and each one with different input data. 84 00:06:21,820 --> 00:06:24,550 We have here a different course title. 85 00:06:24,670 --> 00:06:31,750 Notice that we have used here an extra div in order to instantiate here our template using engie template 86 00:06:31,750 --> 00:06:32,260 outlet. 87 00:06:32,380 --> 00:06:36,520 Instead, we can alternatively also use engy container. 88 00:06:36,640 --> 00:06:41,080 If we now try this out, we are going to see that everything is working as expected. 89 00:06:41,080 --> 00:06:48,340 So that engie container tag is a great way of using engie template outlet because we don't have to create 90 00:06:48,340 --> 00:06:52,050 an extra element just to instantiate a template. 91 00:06:52,090 --> 00:06:57,700 Let's now continue to dive deeper into angular templates and cover some more advanced functionality. 92 00:06:57,710 --> 00:07:03,220 We are going to see how can we take a template like the blank image template and we are going to pass 93 00:07:03,220 --> 00:07:06,000 it as an input to another component.