1 00:00:04,240 --> 00:00:06,310 Hello, everyone, and welcome back. 2 00:00:06,730 --> 00:00:12,250 Listen, we're going to start to learn how attribute directives can interact with the elements onto 3 00:00:12,250 --> 00:00:13,370 which they are applied. 4 00:00:13,390 --> 00:00:20,230 So this instance of the highlighted directive is being applied to this instance of the Coast Guard component. 5 00:00:20,350 --> 00:00:27,250 Now, this particular instance of a Coast Guard component is known as the host element of the highlighted 6 00:00:27,250 --> 00:00:27,850 directive. 7 00:00:27,940 --> 00:00:31,730 So a directive is always applied to a host element. 8 00:00:31,870 --> 00:00:36,290 There are several ways that the directive can interact with the host element. 9 00:00:36,340 --> 00:00:42,170 One possible way is to add an extra Cyesis class here to the Coast Guard element. 10 00:00:42,280 --> 00:00:43,840 Let's see how we can do that. 11 00:00:43,840 --> 00:00:49,240 If we head over here to our standard Cyesis file, you're going to notice that here at the bottom of 12 00:00:49,240 --> 00:00:52,960 the file you're going to find the highlighted Cyesis class. 13 00:00:53,020 --> 00:00:59,380 Let's say that we would like to apply the highlighted Cyesis class to the host element of this directive. 14 00:00:59,410 --> 00:01:05,500 The way that this directive could do that is to interact directly here with the DOM element that corresponds 15 00:01:05,500 --> 00:01:08,620 to the cursor and then adding a Cyesis class. 16 00:01:08,680 --> 00:01:10,320 Let's see how we could do that. 17 00:01:10,360 --> 00:01:17,920 This would be the equivalent of selecting here the course Khadem element and assigning a new value to 18 00:01:17,950 --> 00:01:19,170 a dumb property. 19 00:01:19,190 --> 00:01:27,760 So here dollars zero is pointing to the cost curve element and these the element contains a class name 20 00:01:27,760 --> 00:01:29,890 property, which is currently empty. 21 00:01:30,040 --> 00:01:36,310 If we assign this to a string, for example, containing the value highlighted, which is the name of 22 00:01:36,310 --> 00:01:37,540 our Cyesis class. 23 00:01:37,690 --> 00:01:42,150 This is going to add this first class here to our DOM element. 24 00:01:42,250 --> 00:01:47,860 So as we can see now, we have here this red border and these course he's highlighted. 25 00:01:47,860 --> 00:01:56,020 If we expect here this element, we are going to see that indeed this card here has a Cyesis class highlighted, 26 00:01:56,020 --> 00:01:56,780 added to it. 27 00:01:56,800 --> 00:02:02,050 So we did that manually here via the console in the case here of our directive. 28 00:02:02,080 --> 00:02:08,410 What we want to do is something similar, but using an angular specific construct, which is the most 29 00:02:08,410 --> 00:02:15,880 binding decorator, the host binding the creator is going to allow us to modify dom properties of the 30 00:02:15,880 --> 00:02:18,440 element onto which the directive is applied. 31 00:02:18,520 --> 00:02:25,210 Let's say that we would like to assign the value highlighted the name of this first class to the class 32 00:02:25,210 --> 00:02:25,840 name file. 33 00:02:25,870 --> 00:02:27,740 We could do so in the following way. 34 00:02:27,760 --> 00:02:34,690 We are going to adhere to the host binding the creator to a new method that we are going to call Cyesis 35 00:02:34,690 --> 00:02:35,430 classes. 36 00:02:35,650 --> 00:02:38,320 These methods is going to return here. 37 00:02:38,350 --> 00:02:43,240 The easiest classes that we want to apply to the host element of this directive. 38 00:02:43,270 --> 00:02:47,080 So in this case, we just want to apply one Cyesis class. 39 00:02:47,110 --> 00:02:50,100 Now we need to identify to which the property. 40 00:02:50,140 --> 00:02:52,150 Do we want to assign this value? 41 00:02:52,280 --> 00:02:57,370 And as we have seen in the council, we want to modify the class name property. 42 00:02:57,550 --> 00:03:04,030 Notice that in order for these WEIMING annotation to work, we need to apply this to a typescript getter 43 00:03:04,030 --> 00:03:04,590 methods. 44 00:03:04,600 --> 00:03:10,390 Or if we now try this out, we are going to see that the highlighted Cyesis class is again being applied 45 00:03:10,390 --> 00:03:12,240 here to our course curve. 46 00:03:12,400 --> 00:03:18,820 So as we can see, the host vining decorator is really nothing more than a convenient way for allowing 47 00:03:18,820 --> 00:03:25,930 our directive typescript class to directly interact with the host element onto which the highlighted 48 00:03:25,930 --> 00:03:27,310 directive is applied. 49 00:03:27,310 --> 00:03:34,030 In this case, we are using host wiling to write to the class, name the property of the host element. 50 00:03:34,180 --> 00:03:39,970 We can use the host binding the character to write to any DOM property of the host element. 51 00:03:39,970 --> 00:03:46,030 In general, it's not only for class name, but because adding and removing Cyesis classes to the host 52 00:03:46,030 --> 00:03:48,060 element is such a common operation. 53 00:03:48,070 --> 00:03:53,780 We have here a shorthand notation available here in our host binding configuration. 54 00:03:53,890 --> 00:04:01,720 So in this case, if we instead write to the property class DOT and then the name of this first class 55 00:04:01,720 --> 00:04:07,300 that we want to add or remove and we simply return here, the value true, we are going to see that 56 00:04:07,300 --> 00:04:11,840 the highlighted class is still getting applied to the host element. 57 00:04:11,860 --> 00:04:17,589 So as you can see, the special notation for adding or removing Cyesis classes does indeed make the 58 00:04:17,589 --> 00:04:18,550 code more readable. 59 00:04:18,550 --> 00:04:22,690 But under the WHO, we are really writing to the class name properties. 60 00:04:22,690 --> 00:04:25,210 So we are writing to a DOM property. 61 00:04:25,360 --> 00:04:31,510 Notice that we can only use binding to write a value to a property that is already known. 62 00:04:31,540 --> 00:04:37,420 So if we try to write to a different DOM property that is not known, let's say that we are trying to 63 00:04:37,420 --> 00:04:40,020 write to the does not exist the property. 64 00:04:40,030 --> 00:04:44,140 If we try this out, we are going to see that now our program crashes. 65 00:04:44,140 --> 00:04:50,950 And if we expect here the calls for hearing the council that the property does not exist is not a known 66 00:04:50,950 --> 00:04:52,210 property, of course. 67 00:04:52,660 --> 00:05:00,460 So we can see it's essential that the name of the property that we are writing to is a known the property. 68 00:05:00,640 --> 00:05:07,420 The same way that we can use binding to add or remove the asset classes, we can also add or remove 69 00:05:07,420 --> 00:05:08,270 styles. 70 00:05:08,290 --> 00:05:12,540 Let's say that we want to add here a new board to this element. 71 00:05:12,550 --> 00:05:14,050 We can do it in the following way. 72 00:05:14,050 --> 00:05:19,480 We are going to access the DOM property style, which is a known DOM property, and we are going to 73 00:05:19,480 --> 00:05:22,090 specify here the border property. 74 00:05:22,270 --> 00:05:28,330 We're going to say that the border of this element is going to be one pixel end of type Soulive and 75 00:05:28,330 --> 00:05:29,340 color red. 76 00:05:29,490 --> 00:05:35,100 If we refresh this, we are going to see that now our border is getting applied here to this element. 77 00:05:35,110 --> 00:05:41,000 And if we spec this, we are going to see that the border is getting applied via a style. 78 00:05:41,020 --> 00:05:45,370 So this is not being applied via a success class. 79 00:05:45,400 --> 00:05:51,380 This is being applied directly by the host, by decorator to the style dom property. 80 00:05:51,400 --> 00:05:57,640 Now, in the case of our concrete implementation of the highlighted directive, what we want to do is 81 00:05:57,640 --> 00:06:01,900 we want to add the highlighted class under certain circumstances. 82 00:06:01,910 --> 00:06:05,720 So we are going to use here the notation class that highlighted. 83 00:06:05,770 --> 00:06:10,980 This is going to add the sixth class if the value returned is true. 84 00:06:10,990 --> 00:06:12,340 So let's try this out. 85 00:06:12,340 --> 00:06:18,640 We can see that indeed we have here the class being correctly applied and if we return here false, 86 00:06:18,640 --> 00:06:22,780 we are going to see that the class is no longer applied as expected. 87 00:06:22,810 --> 00:06:27,860 Now, the question is, when should we add or remove this class to this element? 88 00:06:27,910 --> 00:06:34,270 We can do so depending on the content of an input expression that we are going to pass in here to the 89 00:06:34,270 --> 00:06:35,050 directive. 90 00:06:35,080 --> 00:06:39,260 Let's say that we want the value of the expression to be set to true. 91 00:06:39,310 --> 00:06:45,490 So in order to declare this part as an expression, let's remember that we have to use here the square 92 00:06:45,490 --> 00:06:52,380 brackets notation to indicate that this is an input property of something applied to this element. 93 00:06:52,390 --> 00:06:56,870 Notice that this input property will not be an input property, of course. 94 00:06:57,400 --> 00:07:03,850 This is going to be an input property of the highlighted directive that is applied to the course in 95 00:07:03,850 --> 00:07:06,830 order to receive the value of this input property. 96 00:07:06,850 --> 00:07:12,230 We are going to switch over here to the highlighted directive and we are going to add here another input. 97 00:07:12,430 --> 00:07:14,530 This is going to have the name highlighted. 98 00:07:14,530 --> 00:07:18,460 Notice that this name is the name of the input property. 99 00:07:18,610 --> 00:07:22,150 This could be completely different than the name here from the selector. 100 00:07:22,150 --> 00:07:26,720 And we're going to define here a boolean property called is highlighted. 101 00:07:26,920 --> 00:07:29,560 We are going to initialize it with the value falls. 102 00:07:29,590 --> 00:07:33,320 So this is the default value if no value is set here. 103 00:07:33,460 --> 00:07:38,920 What we're going to do now is instead of returning here false, we are going to return the value of 104 00:07:38,920 --> 00:07:41,570 the is allative member variable. 105 00:07:41,680 --> 00:07:46,570 So if we try this out, we are going to see that this time around, the highlight has been correctly 106 00:07:46,570 --> 00:07:50,110 applied according to the value of the input expression. 107 00:07:50,140 --> 00:07:54,570 So if we set this now to false, we are going to see that the highlight disappears. 108 00:07:54,580 --> 00:08:01,590 And if we remove here the expression, then the default value that we have set here is going to be applied 109 00:08:01,600 --> 00:08:04,240 and we don't have here any highlight. 110 00:08:04,240 --> 00:08:10,930 As expected, setting the properties on the host element is just one way that the directive can interact 111 00:08:10,930 --> 00:08:12,060 with the host element. 112 00:08:12,100 --> 00:08:16,840 Notice that so far we have been using host binding to set the properties. 113 00:08:17,140 --> 00:08:20,690 This is very different than ASML attributes. 114 00:08:20,860 --> 00:08:27,770 We can also use here the host binding the character if needed to set the attributes of the host element. 115 00:08:27,790 --> 00:08:32,030 Let's say that this card here has an attribute called disabled. 116 00:08:32,049 --> 00:08:36,070 We could set the attribute which is different than the DOM property. 117 00:08:36,100 --> 00:08:38,400 Also by using host binding. 118 00:08:38,559 --> 00:08:45,040 So we the host binding, we can write to an attribute using the attribute notation here with a dot. 119 00:08:45,040 --> 00:08:49,780 And then we have to write here the name of the attribute that we want to modify. 120 00:08:49,870 --> 00:08:52,070 And we are going to declare here a getter. 121 00:08:52,090 --> 00:08:56,190 We are going to call it disabled and we are going to have this value return. 122 00:08:56,200 --> 00:08:58,860 Let's see the value true with this in place. 123 00:08:58,870 --> 00:09:00,810 We are going to reload our application. 124 00:09:00,820 --> 00:09:04,930 We are going to inspect here the course curve and take a look. 125 00:09:04,940 --> 00:09:09,010 We have here a new attribute disabled set to true. 126 00:09:09,130 --> 00:09:15,080 So let's remember that a DOM attribute is different than DOM properties. 127 00:09:15,100 --> 00:09:17,650 Sometimes they have exactly the same value. 128 00:09:17,650 --> 00:09:23,740 In certain cases, the browser is going to keep the property and the attribute in sync and sometimes 129 00:09:23,740 --> 00:09:26,050 these two can have different values. 130 00:09:26,230 --> 00:09:34,060 In either case, we can write to both attributes and DOM properties by using the host binding syntax. 131 00:09:34,090 --> 00:09:40,120 Next, we are going to learn how to directive can interact with the host element via custom events. 132 00:09:40,330 --> 00:09:43,090 This is coming right up in the next lessoned.