1
00:00:03,880 --> 00:00:09,550
Hello, everyone, and welcome back in this new section of the course, we are going to cover Angular

2
00:00:09,550 --> 00:00:15,370
Directive's, this is now a great time to switch to a new brand so that we are sure that you have a

3
00:00:15,370 --> 00:00:17,710
clean starting point for this section.

4
00:00:17,740 --> 00:00:23,620
Let's then grab a new code sample from our course repository, let's say a little over to the GitHub

5
00:00:23,620 --> 00:00:30,270
page of the angular niversity available here at GitHub dot com, Angulated Dash University.

6
00:00:30,400 --> 00:00:32,250
Let's look for the lessons code.

7
00:00:32,259 --> 00:00:38,710
We are going to go here to the search repository search box and we are going to look for the angular,

8
00:00:38,710 --> 00:00:40,240
deep dive course.

9
00:00:40,240 --> 00:00:43,790
Let's click into it and let's select a new branch.

10
00:00:43,810 --> 00:00:49,930
We are going to head over here to the branch dropdown and we're going to select here the two dash directive's

11
00:00:49,930 --> 00:00:50,610
branch.

12
00:00:50,650 --> 00:00:56,610
There will be other branches on that dropdown, but this is the correct one to dash directive's.

13
00:00:56,620 --> 00:00:59,820
This contains the code for the beginning of this new section.

14
00:00:59,860 --> 00:01:05,860
As usual, you can grab the code here as a zip file using the clone or download button, or you can

15
00:01:05,860 --> 00:01:09,160
switch into this branch if you are using git.

16
00:01:09,160 --> 00:01:14,950
If you are using it and you are not downloading zip files, you can switch to the branch by running

17
00:01:14,950 --> 00:01:19,080
the following commands, get checked minus B to this directive.

18
00:01:19,090 --> 00:01:24,430
So this is the name of the local branch and origin to this directive.

19
00:01:24,520 --> 00:01:29,640
This is the name of the remote branch that we want to copy into our work environment.

20
00:01:29,770 --> 00:01:36,250
Once you have the code installed, you can then start the server using NPM start and you will get here

21
00:01:36,280 --> 00:01:38,950
a clean starting point for this section.

22
00:01:39,070 --> 00:01:44,480
Now that we have the new code up and running, let's then start talking about angular directives.

23
00:01:44,620 --> 00:01:46,750
There are multiple types of directives.

24
00:01:46,870 --> 00:01:51,250
Some of the directives we have already covered, they are components.

25
00:01:51,250 --> 00:01:54,060
Components are directives with a template.

26
00:01:54,070 --> 00:01:59,560
There are also other types of directives, such as, for example, structural directives that we have

27
00:01:59,560 --> 00:02:03,880
covered when we covered NGF, Energy for Energy Switch, etc..

28
00:02:04,030 --> 00:02:10,060
These are attributes that are added to an element of the page and the element can either be a plane

29
00:02:10,060 --> 00:02:17,200
HTML elements such as a div or a custom component such as, for example, CROSSCOURT, and these attributes

30
00:02:17,200 --> 00:02:23,650
that we apply to the elements are going to either modify the behavior of that element or they are going

31
00:02:23,650 --> 00:02:26,940
to modify the behavior of the element.

32
00:02:27,010 --> 00:02:32,280
This is a very particular type of directive, the one that takes the star notation at the beginning.

33
00:02:32,290 --> 00:02:34,390
This is a structural directive.

34
00:02:34,390 --> 00:02:37,150
We're going to cover these specifically later on.

35
00:02:37,210 --> 00:02:43,320
Right now, let's focus on attributes, directives which we did not demonstrate yet.

36
00:02:43,360 --> 00:02:46,270
So what does an attribute directive look like?

37
00:02:46,270 --> 00:02:53,260
Let's say that, for example, we have here an e-mail form and the form has here and input field if

38
00:02:53,260 --> 00:02:55,230
we are using plain e-mail.

39
00:02:55,360 --> 00:03:01,720
So these are not angular directives, we can mark this input field as disabled or required.

40
00:03:01,930 --> 00:03:10,050
So these attributes that are added here to this plane HTML element are effectively modifying the behavior.

41
00:03:10,060 --> 00:03:16,570
And in this case, the appearance of the element disabled is going to typically carry out the input

42
00:03:16,570 --> 00:03:22,390
and also modify the behavior, meaning we cannot input data into the input field any more.

43
00:03:22,470 --> 00:03:27,940
Required, on the other hand, is going to change the look and feel of the input field.

44
00:03:27,940 --> 00:03:32,020
The field will be marked with a red border in case it's not filled in.

45
00:03:32,230 --> 00:03:38,800
These two properties, disabled and required, are a good example of what an angular attribute directive

46
00:03:38,800 --> 00:03:39,880
will look like.

47
00:03:40,030 --> 00:03:47,440
These are attributes directives that are applied to an element and modify its behavior and or appearance.

48
00:03:47,440 --> 00:03:51,820
So let's see how can we build in angular custom directives?

49
00:03:51,820 --> 00:03:59,470
So the same way that we can extend the browser and create our own HTML tax like we do here with corsairs,

50
00:03:59,530 --> 00:04:05,260
we can also extend the standard, the browser functionality to create our own custom directives.

51
00:04:05,300 --> 00:04:09,340
Let's then go ahead and create our first custom directive.

52
00:04:09,340 --> 00:04:11,470
We are going to head over here to the terminal.

53
00:04:11,470 --> 00:04:17,620
We are going to clear the terminal and we are going to run the following angular CLIA command gng,

54
00:04:17,649 --> 00:04:20,440
which is shorthand for generate directive.

55
00:04:20,440 --> 00:04:21,970
That's what we want to scaffolded.

56
00:04:21,970 --> 00:04:25,960
And then the folder that we want to put the new directive in.

57
00:04:25,960 --> 00:04:32,200
Let's create a folder called Simply Directive's, and we are going to add here the name of the directive.

58
00:04:32,200 --> 00:04:33,960
We are going to call it highlighted.

59
00:04:33,970 --> 00:04:39,700
So this is going to be an attribute that when added to a course, cart is going to highlight it with

60
00:04:39,700 --> 00:04:42,910
a very visible border after executing this command.

61
00:04:42,910 --> 00:04:49,180
We are going to see that here in the directives folder we have here in new highlighted directive.

62
00:04:49,270 --> 00:04:52,450
And so here is what a directive looks like.

63
00:04:52,450 --> 00:04:57,280
As we can see, just like the case of components, this is a plain typescript class.

64
00:04:57,280 --> 00:05:00,430
It has here a directive decorator that is very similar.

65
00:05:00,530 --> 00:05:06,770
Were component in the sense that we have to specify here is selected for this directive, but unlike

66
00:05:06,770 --> 00:05:13,940
the case here over the course of selecter, which was an element selected here, we are specifying an

67
00:05:13,940 --> 00:05:19,380
attribute selector notice here, the square brackets around the world highlighted.

68
00:05:19,430 --> 00:05:25,880
This means that this directive is going to be applied to any element of the page, which has here the

69
00:05:25,880 --> 00:05:30,260
highlighted attribute applied to it before anything else.

70
00:05:30,290 --> 00:05:36,230
Let's quickly confirm that indeed, by adding here to this element, we are creating an instance of

71
00:05:36,230 --> 00:05:40,460
this highlighted directive class and we are adding it here to this element.

72
00:05:40,470 --> 00:05:45,920
So in order to confirm that we are creating a directive, let's add here some logging at the level of

73
00:05:45,920 --> 00:05:49,760
the constructor, we are going to simply say directive created.

74
00:05:49,760 --> 00:05:55,220
And with these logging in place, let's reload here the application and let's have a look here at the

75
00:05:55,220 --> 00:05:59,570
console so we can see the directive is indeed being creative.

76
00:05:59,570 --> 00:06:04,970
And let's confirm that this is happening because the highlighted element was applied here.

77
00:06:05,030 --> 00:06:10,790
So if we remove the element and we reload the application, we are going to see that this time around

78
00:06:10,790 --> 00:06:13,420
the directive was not instantiated.

79
00:06:13,550 --> 00:06:21,320
If we now have here a second crosscourt and let's passive discourse input another course from the courses

80
00:06:21,320 --> 00:06:25,420
array, let's say that we are going to pass the first the course in the array.

81
00:06:25,460 --> 00:06:29,230
We are then going to apply here again, the highlighted directive.

82
00:06:29,240 --> 00:06:32,030
Notice that we can pass an expression for the moment.

83
00:06:32,030 --> 00:06:33,020
Let's not do that.

84
00:06:33,020 --> 00:06:37,980
Let's simply apply the highlighted directive to two separate course cards.

85
00:06:37,980 --> 00:06:44,240
So if we now try these out, we are going to see that we have two cards here on the screen and we can

86
00:06:44,240 --> 00:06:47,710
see that the directive was created two times.

87
00:06:47,720 --> 00:06:55,370
So these in the disconfirm that by adding the attributes to our element, we are attaching it some behavior

88
00:06:55,370 --> 00:06:59,030
implemented by the directive that did not exist before.

89
00:06:59,210 --> 00:07:05,330
Let's now quickly switch here to the application component and remove the second card that we won't

90
00:07:05,330 --> 00:07:05,950
be needing.

91
00:07:05,960 --> 00:07:10,680
And let's start talking about how we are going to implement the highlighted directive.

92
00:07:10,730 --> 00:07:13,340
This is coming right up in the next lesson.