1 00:00:04,900 --> 00:00:10,740 Hello, everyone, and welcome in this lesson, we are going to cover angular structural directive's, 2 00:00:10,750 --> 00:00:17,800 we're going to learn how to build our own directive's that look and feel like the angular NGF or ENGY 3 00:00:17,800 --> 00:00:19,720 for structural directive's. 4 00:00:19,720 --> 00:00:26,290 Structural directive's used this star syntax and they allow us to add or remove other elements from 5 00:00:26,290 --> 00:00:26,980 the page. 6 00:00:27,310 --> 00:00:33,760 We are going to learn to create a custom structural directive that is essentially the inverse of NGF. 7 00:00:33,790 --> 00:00:39,400 So we are going to call it Engie X unless and here is how it's going to work. 8 00:00:39,610 --> 00:00:45,960 We are going to apply this new directive called NGF unless and we are going to pass it a condition. 9 00:00:46,030 --> 00:00:52,030 This condition here, just like in the case of NGF, is going to determine if the element is going to 10 00:00:52,030 --> 00:00:53,200 be shown or not. 11 00:00:53,350 --> 00:00:55,280 But the logic is reverse. 12 00:00:55,290 --> 00:01:02,170 So in the case of engy, if we are showing the elements unter, which NGF is applied, if the condition 13 00:01:02,170 --> 00:01:10,180 passed here is true, if it's false, we are having the element in this case, this div with class courses, 14 00:01:10,330 --> 00:01:15,070 SGX and less, on the other hand, is going to work in the opposite way. 15 00:01:15,340 --> 00:01:21,370 This means that in the case of SGX, unless we are going to show the element onto which the directive 16 00:01:21,370 --> 00:01:26,700 is applied, only if the condition provided here gets evaluated to false. 17 00:01:26,710 --> 00:01:29,250 So it's the opposite of NGF. 18 00:01:29,260 --> 00:01:32,560 Let's then see how can we build a directive like this? 19 00:01:32,560 --> 00:01:37,600 We are going to head over here to the terminal and we are going to stop the angular CLIA development 20 00:01:37,600 --> 00:01:38,140 server. 21 00:01:38,290 --> 00:01:45,820 Next, we are going to do Engy generate directive and we are going to specify here the name of the directive. 22 00:01:45,820 --> 00:01:52,240 So we are going to put it in the directive's folder and we are going to call it Engy X Desh unless and 23 00:01:52,240 --> 00:01:59,500 if you are wondering what is the meaning of this prefix here, Engie X, this prefix is commonly used 24 00:01:59,500 --> 00:02:03,720 in order to identify a directive that is not part of angular code. 25 00:02:03,820 --> 00:02:09,970 So it could be read as angular extended directive or angular extra directive. 26 00:02:10,000 --> 00:02:14,770 It's just a way of distinguishing this directive from directives like NGF. 27 00:02:14,770 --> 00:02:21,100 So anyone looking at the template is going to quickly identify that this is a custom directive, not 28 00:02:21,100 --> 00:02:22,470 part of angular core. 29 00:02:22,600 --> 00:02:27,450 Let's then quickly run this command and have a look here at the directives folder. 30 00:02:27,460 --> 00:02:35,020 So as we can see, we now have here a couple of new files we have here, the end and less scaffolded 31 00:02:35,020 --> 00:02:35,700 directive. 32 00:02:35,770 --> 00:02:38,950 Let's then start building our structural directive. 33 00:02:38,980 --> 00:02:44,110 The first thing that you will notice in the structural directive is that The Selecter is identical to 34 00:02:44,110 --> 00:02:45,750 an attribute directive. 35 00:02:45,760 --> 00:02:49,500 So what is this star syntax that we are seeing here? 36 00:02:49,690 --> 00:02:55,180 The key thing to understand about structural directives is that they are applied on top of a template. 37 00:02:55,180 --> 00:03:01,870 So imagine that this div that we are defining here is an energy template, and this NGF directive is 38 00:03:01,870 --> 00:03:07,900 going to decide why this condition, when the template should be instantiated in a very similar way 39 00:03:07,900 --> 00:03:09,190 to what we saw before. 40 00:03:09,190 --> 00:03:14,280 We saw how a template can be instantiated using engie template outlet. 41 00:03:14,290 --> 00:03:18,010 Well, there's something implicitly going on here with NGF. 42 00:03:18,010 --> 00:03:25,270 What ANGULAR will do is it's going to discover this syntax and it's going to create implicitly an energy 43 00:03:25,270 --> 00:03:33,310 template tag where the content of this template onto which NGF is getting applied is going to be present 44 00:03:33,310 --> 00:03:35,530 inside this implicit template. 45 00:03:35,530 --> 00:03:43,530 And the NGF directive is going to be applied here on top of this engie template as an attribute directive. 46 00:03:43,540 --> 00:03:50,890 So this is what's going on under the hood whenever we are applying start NGF to the DIV courses directive. 47 00:03:50,900 --> 00:03:57,100 It's just a shorthand syntax to these more explicit syntax that we are seeing here. 48 00:03:57,310 --> 00:04:02,100 Notice that in this disfigured form, we cannot use that as syntax here. 49 00:04:02,110 --> 00:04:08,020 What we need to do is, like we saw before, to define here a course template variable that is going 50 00:04:08,020 --> 00:04:10,570 to be visible only inside the template. 51 00:04:10,570 --> 00:04:13,330 In this case, we don't need to assign here any value. 52 00:04:13,450 --> 00:04:19,380 If we don't assign it any value, it's going to implicitly get assigned the value of the expression. 53 00:04:19,420 --> 00:04:23,690 Let's quickly confirm that these extended syntax is indeed valid. 54 00:04:23,710 --> 00:04:29,560 So if we refresh here the application, we are going to see that we are still seeing here the course 55 00:04:29,560 --> 00:04:35,220 of variable inside this template and that the engie template is indeed being instantiated. 56 00:04:35,230 --> 00:04:41,890 If we remove here the NGF directive, we are going to see that nothing is getting instantiated to the 57 00:04:41,890 --> 00:04:42,420 screen. 58 00:04:42,430 --> 00:04:49,630 So it's indeed NGF that is grabbing here the template and it's instantiating it programmatically. 59 00:04:49,870 --> 00:04:56,680 Also, let's confirm that if we negate here the value of the expression that our template is going to 60 00:04:56,680 --> 00:04:58,850 get hidden and that is indeed the case. 61 00:04:58,870 --> 00:05:00,390 So this shows that. 62 00:05:00,640 --> 00:05:09,480 Syntex is a valid replacement to the star NGF Syntex and that star and if Syntex that we usually use 63 00:05:09,510 --> 00:05:14,170 is just a shorthand notation for these more explicit syntax. 64 00:05:14,370 --> 00:05:15,450 Let's summarize. 65 00:05:15,450 --> 00:05:21,960 We have learned in this lesson that strict directives such as NGF or the custom directive that we are 66 00:05:21,960 --> 00:05:29,070 able to build SGX unless I really nothing more than plain angular attribute directives that have the 67 00:05:29,070 --> 00:05:35,400 special ability of instantiating a template onto which they are applied with is in mind. 68 00:05:35,400 --> 00:05:40,440 Let's then start building our custom engine and less structural directive.