1
00:00:03,650 --> 00:00:10,075
We just had a brief introduction to attribute directives in the previous lecture.

2
00:00:10,075 --> 00:00:16,440
Let's now construct a custom attribute directive for our angular application and then

3
00:00:16,440 --> 00:00:23,025
make use of it within the views of some of the components within our angular application.

4
00:00:23,025 --> 00:00:26,340
Along the way, we will learn about how we can create

5
00:00:26,340 --> 00:00:30,795
custom directives and use them in our Angular application.

6
00:00:30,795 --> 00:00:36,275
We will make use of Angular CLI to create the custom directive and thereafter,

7
00:00:36,275 --> 00:00:39,830
update it to perform the kind of

8
00:00:39,830 --> 00:00:45,245
features that we need provided by this attribute directive.

9
00:00:45,245 --> 00:00:51,220
Under the keep the directive in a separate folder named Directives,

10
00:00:51,220 --> 00:00:52,700
within my app folder.

11
00:00:52,700 --> 00:00:56,805
So, let me create a new folder named Directives.

12
00:00:56,805 --> 00:01:02,820
Now, I'm going to create my custom directive inside this Directives folder.

13
00:01:02,820 --> 00:01:07,170
Will take the help of angular CLI to create our custom directive.

14
00:01:07,170 --> 00:01:08,495
So, at the prompt,

15
00:01:08,495 --> 00:01:20,400
type ng generate or g detectives/highlight.

16
00:01:20,780 --> 00:01:26,110
So, this particular directive is going to be called the highlight directive.

17
00:01:26,110 --> 00:01:28,790
So with this, we will create

18
00:01:28,790 --> 00:01:34,460
a new directive called the highlight directive and then we will now go

19
00:01:34,460 --> 00:01:38,600
and edit that highlight directive files that

20
00:01:38,600 --> 00:01:43,175
have been created to create our custom directive.

21
00:01:43,175 --> 00:01:46,895
What exactly am I trying to achieve with this directive?

22
00:01:46,895 --> 00:01:52,910
Let me take you to the menu view within our Angular application.

23
00:01:52,910 --> 00:01:54,355
In the menu view,

24
00:01:54,355 --> 00:01:58,420
when I want to select any one of these items currently,

25
00:01:58,420 --> 00:02:01,495
I have no clue exactly where I am.

26
00:02:01,495 --> 00:02:08,520
Now instead, when my mouse hovers onto any one of these items in my grid list,

27
00:02:08,520 --> 00:02:13,340
I want to be able to highlight some item to indicate that if I click,

28
00:02:13,340 --> 00:02:15,870
I'm going to be selecting that particular item.

29
00:02:15,870 --> 00:02:19,220
So, that is what the functionality that I am going to

30
00:02:19,220 --> 00:02:23,825
design using my highlight directive that I have just created.

31
00:02:23,825 --> 00:02:28,410
To do that, let's open the highlight directive.ts file.

32
00:02:28,410 --> 00:02:33,935
So, you see that we have the bare-bones scaffolding available for the directive

33
00:02:33,935 --> 00:02:36,500
already here and you'll see that we have

34
00:02:36,500 --> 00:02:39,845
already imported the director from the Angular code.

35
00:02:39,845 --> 00:02:45,230
Now to this, I'm going to add in a few more imports.

36
00:02:45,230 --> 00:02:52,055
So, we'll import ElementRef and then we will import Renderer2 here.

37
00:02:52,055 --> 00:02:57,215
Now Renderer2 is available only with Angular four and above.

38
00:02:57,215 --> 00:02:59,710
The earlier version of renderer was called

39
00:02:59,710 --> 00:03:04,290
renderush and it has been duplicated now with Angular four.

40
00:03:04,290 --> 00:03:06,920
Renderer2 is now a new implementation of

41
00:03:06,920 --> 00:03:11,030
renderer with better support for some other features.

42
00:03:11,030 --> 00:03:18,045
So, I'm going to apply the Renderer2 for creating the highlight directive.

43
00:03:18,045 --> 00:03:20,005
Now why do we use this renderer?

44
00:03:20,005 --> 00:03:23,690
Now when you create directives within your Angular application,

45
00:03:23,690 --> 00:03:25,640
from your Angular application itself,

46
00:03:25,640 --> 00:03:30,750
although at the moment our Angular application is being rendered mainly in the browser,

47
00:03:30,750 --> 00:03:33,740
you can use the same scaffolding code for

48
00:03:33,740 --> 00:03:37,420
your Angular application to create an application for other purposes.

49
00:03:37,420 --> 00:03:42,985
In the native skip course that we will see later in this specialization,

50
00:03:42,985 --> 00:03:50,385
we will see another use of this code for creating applications using NativeScript.

51
00:03:50,385 --> 00:03:54,470
So, in that case the rendering would be done in a different way,

52
00:03:54,470 --> 00:03:56,160
not into a browser.

53
00:03:56,160 --> 00:04:00,455
So, we need to use this Renderer2,

54
00:04:00,455 --> 00:04:03,710
which allows us to automatically adapt itself to

55
00:04:03,710 --> 00:04:08,120
the appropriate platform on which the rendering of this view is being done.

56
00:04:08,120 --> 00:04:13,320
So, that's the reason why I am making use of the renderer here.

57
00:04:13,660 --> 00:04:20,460
Also, one more thing that I want to import is the HostListener.

58
00:04:20,460 --> 00:04:24,650
The HostListener will listen to mouse movements from the screen

59
00:04:24,650 --> 00:04:28,755
and appropriately respond in those circumstances.

60
00:04:28,755 --> 00:04:34,099
We will see the use of these when we create the directive in a few moments.

61
00:04:34,099 --> 00:04:37,010
So now, that we have imported the things that we need,

62
00:04:37,010 --> 00:04:40,620
we're going to inject a few things into our constructor.

63
00:04:40,620 --> 00:04:47,180
So, we'll first use a el,

64
00:04:47,180 --> 00:04:52,625
which is of the type ElementRef and

65
00:04:52,625 --> 00:04:59,569
also the second one that we will use is the renderer,

66
00:04:59,569 --> 00:05:04,265
which is of the type Renderer2.

67
00:05:04,265 --> 00:05:11,254
Now with this, what we're going to do is that we will use

68
00:05:11,254 --> 00:05:20,360
the HostListener and then they would indicate that for the HostListener,

69
00:05:20,360 --> 00:05:28,094
when the mouseenter event occurs,

70
00:05:28,094 --> 00:05:38,340
then we'll call the onmouseenter method

71
00:05:38,340 --> 00:05:41,400
and in the onmouseenter method, we're going to do something.

72
00:05:41,400 --> 00:05:43,790
Similarly, I'll create another one

73
00:05:43,790 --> 00:05:55,005
called HostListener and mouseleave.

74
00:05:55,005 --> 00:05:58,310
So when the mouse leaves a particular region,

75
00:05:58,310 --> 00:06:02,790
then what are you going to do on mouseleave?

76
00:06:02,950 --> 00:06:06,470
We're going to do a different operation.

77
00:06:06,470 --> 00:06:11,660
So, what we're going to do is when the mouse enters a particular region, in this case,

78
00:06:11,660 --> 00:06:15,710
we are using this attribute directive in order to highlight

79
00:06:15,710 --> 00:06:22,130
the specific item from my grid list onto which the mouse has hovered on to.

80
00:06:22,130 --> 00:06:24,935
So, that's the purpose for implementing these

81
00:06:24,935 --> 00:06:28,050
and when the mouse pointer hovers away from that item,

82
00:06:28,050 --> 00:06:29,580
that will no longer be highlighted.

83
00:06:29,580 --> 00:06:31,575
So, that's the purpose of this directive,

84
00:06:31,575 --> 00:06:33,850
the highlight directive that I'm creating here.

85
00:06:33,850 --> 00:06:40,715
So, when the mouse enters a particular area.

86
00:06:40,715 --> 00:06:47,245
So, I'm going to use the renderer and the renderer provides a method called addClass.

87
00:06:47,245 --> 00:06:55,990
So, this method will be used to add a class to the grid item in my grid list.

88
00:06:55,990 --> 00:06:58,755
So, the class that I'm going to add,

89
00:06:58,755 --> 00:07:08,160
the way it is configured is will say this.el.nativeElement and

90
00:07:08,160 --> 00:07:12,260
the second parameter is

91
00:07:12,260 --> 00:07:17,240
the class name that you're going to apply when you venture into that area.

92
00:07:17,240 --> 00:07:21,965
So, we'll apply this highlight class to that element when

93
00:07:21,965 --> 00:07:27,425
your mouse moves into the region where that element is rendered in the view.

94
00:07:27,425 --> 00:07:34,765
Now, the same thing. I'm going to do another method when the mouse leaves,

95
00:07:34,765 --> 00:07:37,200
I will remove that class.

96
00:07:37,200 --> 00:07:41,275
So, the removeClass method is also supported by Renderer2.

97
00:07:41,275 --> 00:07:42,530
So, in this case,

98
00:07:42,530 --> 00:07:44,780
when the mouse moves into that region,

99
00:07:44,780 --> 00:07:49,270
this highlight class will be added to that grid item.

100
00:07:49,270 --> 00:07:52,250
When the mouse leaves that particular grid item,

101
00:07:52,250 --> 00:07:54,890
the highlight class will be removed from the grid items.

102
00:07:54,890 --> 00:07:57,685
So, this is how using this attribute directive,

103
00:07:57,685 --> 00:08:00,540
I'm adding and removing classes,

104
00:08:00,540 --> 00:08:06,840
CSS classes to my grid item in my GridView page.

105
00:08:06,840 --> 00:08:12,070
Now, the next step is of course to create this class called as the highlight class.

106
00:08:12,070 --> 00:08:16,535
So, to do that, I will go into the styles.scss

107
00:08:16,535 --> 00:08:21,495
file where we have the global styles stored here.

108
00:08:21,495 --> 00:08:23,900
So, within the styles.scss file,

109
00:08:23,900 --> 00:08:32,385
I will add in the highlight CSS class there.

110
00:08:32,385 --> 00:08:37,340
The highlight CSS class I will define as background-color.

111
00:08:37,340 --> 00:08:42,825
I will apply background-pale,

112
00:08:42,825 --> 00:08:46,810
which I have already defined earlier and then,

113
00:08:46,810 --> 00:08:52,140
I would apply a border of one pixel,

114
00:08:52,140 --> 00:08:55,780
solid border of the color,

115
00:08:55,860 --> 00:09:04,595
primary-color-dark, which also I have defined earlier

116
00:09:04,595 --> 00:09:13,335
as a CSS variable and I will also increase the z-index to one.

117
00:09:13,335 --> 00:09:18,750
Which means that that item will be raised up over the remaining items in there.

118
00:09:18,750 --> 00:09:24,790
I'm sure from your knowledge of CSS you understand what is being done.

119
00:09:24,790 --> 00:09:31,870
In addition, I'm going to do a little bit of a transform on the item there,

120
00:09:31,870 --> 00:09:36,495
I'm just going to scale it up by a tiny amount,

121
00:09:36,495 --> 00:09:39,570
by scale it up to 1.01.

122
00:09:39,570 --> 00:09:42,220
So, tiny little bit raised and then showed up,

123
00:09:42,220 --> 00:09:46,115
so that highlights it on the screen.

124
00:09:46,115 --> 00:09:50,370
So, this is the CSS class that

125
00:09:50,370 --> 00:09:54,535
I'm going to apply using the custom directive that I have created there.

126
00:09:54,535 --> 00:09:57,530
Now, where am I going to apply this custom directive?

127
00:09:57,530 --> 00:10:04,340
We're going to use this custom directive in our menu components template file.

128
00:10:04,340 --> 00:10:06,170
Now, before we do that,

129
00:10:06,170 --> 00:10:08,840
let's go back to highlight directive and

130
00:10:08,840 --> 00:10:11,610
you would notice that in the highlight directive,

131
00:10:11,610 --> 00:10:17,555
you have that directive decorator here where you have a property called selector,

132
00:10:17,555 --> 00:10:20,355
which has been set to app highlight.

133
00:10:20,355 --> 00:10:23,360
So, wherever you want to use this directive,

134
00:10:23,360 --> 00:10:25,430
you will use an attribute called

135
00:10:25,430 --> 00:10:30,110
appHighlight within that particular element in your template.

136
00:10:30,110 --> 00:10:33,940
So, that is how this directive is created.

137
00:10:33,940 --> 00:10:36,910
So, let's apply this app highlight attribute

138
00:10:36,910 --> 00:10:41,165
directive within our menu components template file.

139
00:10:41,165 --> 00:10:44,749
So, going to the menu components template file,

140
00:10:44,749 --> 00:10:50,090
I'm going to apply that highlight directive to this mat-grid-tile here.

141
00:10:50,090 --> 00:10:52,330
So, in this grid tile,

142
00:10:52,330 --> 00:11:01,950
I will apply that appHighlight attribute directive to this particular element here.

143
00:11:01,950 --> 00:11:04,485
With this, we have completed all the updates.

144
00:11:04,485 --> 00:11:11,005
Let's save the changes and then go and take a look at our application after this change.

145
00:11:11,005 --> 00:11:13,680
Going to our application in the browser.

146
00:11:13,680 --> 00:11:20,270
Now, with the application of the appHighlight directive that we have just created,

147
00:11:20,270 --> 00:11:27,050
you'll notice exactly what happens when we browse onto an element in our menu view here.

148
00:11:27,050 --> 00:11:32,010
So, you notice that whenever you hover onto an item in the view,

149
00:11:32,010 --> 00:11:36,770
the highlight CSS class is being applied to each of them,

150
00:11:36,770 --> 00:11:41,150
whereby what particular item is being highlighted in the menu,

151
00:11:41,150 --> 00:11:46,270
so that this gives a better user experience for the user.

152
00:11:46,270 --> 00:11:50,719
You can see that the size of that element is ever so slightly

153
00:11:50,719 --> 00:11:55,840
increased and brought forward in the view here.

154
00:11:55,840 --> 00:11:58,910
This completes the implementation of

155
00:11:58,910 --> 00:12:03,470
the custom attribute directive that we did in this exercise.

156
00:12:03,470 --> 00:12:09,810
This is a good time for you to do a git commit with the message directive.