1
00:00:00,000 --> 00:00:04,549
[MUSIC]

2
00:00:04,549 --> 00:00:08,557
In the very first module we
reviewed directives briefly and

3
00:00:08,557 --> 00:00:11,590
we look at structural directives.

4
00:00:11,590 --> 00:00:15,410
We saw how structural directives
enable us to design the templates.

5
00:00:15,410 --> 00:00:17,880
For our Angular components.

6
00:00:17,880 --> 00:00:21,160
In this lesson, we're going to
review attribute directives.

7
00:00:21,160 --> 00:00:23,770
The third kind of directive.

8
00:00:23,770 --> 00:00:28,790
And we will also look at how we
can design a custom directive

9
00:00:28,790 --> 00:00:31,350
in the exercise that follows this lecture.

10
00:00:33,240 --> 00:00:37,490
So as we realized, directives are a way

11
00:00:37,490 --> 00:00:42,360
of designing both Angular templates and
enable us to do

12
00:00:42,360 --> 00:00:47,820
various parts of the dam manipulation
with an R Angular applications views.

13
00:00:47,820 --> 00:00:53,280
So, we saw the use of directives to give
instructions to the Angular repetition and

14
00:00:53,280 --> 00:00:56,750
how to render the templates into the DOM.

15
00:00:56,750 --> 00:01:01,090
And we already learned that
within the Angular application,

16
00:01:01,090 --> 00:01:06,020
the use of structural directives in
the templates enables us to design

17
00:01:06,020 --> 00:01:10,080
our views of our Angular application.

18
00:01:10,080 --> 00:01:15,060
We also learned that the component
that we have used so

19
00:01:15,060 --> 00:01:20,640
extensively in the various
exercises in this course.

20
00:01:20,640 --> 00:01:26,410
It is a special kind of directive which
has a template or a view attached to it.

21
00:01:27,430 --> 00:01:29,560
And we also learned earlier that,

22
00:01:29,560 --> 00:01:35,330
there are two other kinds of directives
that we can use within our templates.

23
00:01:35,330 --> 00:01:39,390
The structural directives and
attributes directives.

24
00:01:39,390 --> 00:01:44,060
We looked at some built-in structural
directives in the very first

25
00:01:44,060 --> 00:01:46,990
module of this course.

26
00:01:46,990 --> 00:01:52,380
And we saw how we can use structural
directives like the NG4 or NGF and

27
00:01:52,380 --> 00:01:59,060
more in that exercises in
the previous parts of this course.

28
00:01:59,060 --> 00:02:04,230
Now we'll look at the other kind of
directive, the attribute directive.

29
00:02:04,230 --> 00:02:05,630
What is an attribute directive and

30
00:02:05,630 --> 00:02:10,360
how does it help us when
designing our Angular application.

31
00:02:10,360 --> 00:02:12,650
So what are attribute directives?

32
00:02:12,650 --> 00:02:18,790
Attribute directives are used as
attributes for elements in your template.

33
00:02:18,790 --> 00:02:23,460
So just like that you have your HTML code
that you write within your template and

34
00:02:23,460 --> 00:02:26,900
the HTML elements you can
apply an attribute directive

35
00:02:26,900 --> 00:02:28,410
to those HTML elements.

36
00:02:28,410 --> 00:02:31,940
We also saw the user's
structural directive.

37
00:02:31,940 --> 00:02:37,020
And we saw the components can
themselves add additional HTML-like

38
00:02:37,020 --> 00:02:41,710
elements that can be used within
the templates of your Angular application.

39
00:02:41,710 --> 00:02:45,510
So the way we use the components
with their selectors

40
00:02:45,510 --> 00:02:49,850
was one way we used directives
within our Angular application.

41
00:02:49,850 --> 00:02:53,910
When we saw the use of structural
directives which were applied to

42
00:02:53,910 --> 00:02:58,890
the various HTML elements
within our template.

43
00:02:58,890 --> 00:03:02,590
Now we look at attribute directives
which enable us to change

44
00:03:02,590 --> 00:03:06,930
certain properties of our HTML elements.

45
00:03:06,930 --> 00:03:09,480
So what are the use of
attribute directives?

46
00:03:09,480 --> 00:03:15,480
Attribute directives listen to and modify
the behavior of other HTML elements or

47
00:03:15,480 --> 00:03:21,410
attributes or properties or components
that you use within your templates.

48
00:03:21,410 --> 00:03:25,630
We have indeed actually
used some of the built-in

49
00:03:25,630 --> 00:03:30,500
attributes directive already without
explicitly talking about them.

50
00:03:30,500 --> 00:03:34,880
Talking about the built-in attribute
directives that come as part of your

51
00:03:34,880 --> 00:03:36,260
Angular framework.

52
00:03:36,260 --> 00:03:41,390
You've already encountered Ng model
in some of the previous lessons

53
00:03:41,390 --> 00:03:46,410
in this course,
specifically in the data binding area and

54
00:03:46,410 --> 00:03:52,620
also when we studied about
the fonts in the previous module.

55
00:03:52,620 --> 00:03:55,520
There are two other kinds of built
in attribute directives that we

56
00:03:55,520 --> 00:03:59,180
might encounter is NgClass and NgStyle.

57
00:03:59,180 --> 00:04:03,430
By the name itself you can
guess what their purpose is.

58
00:04:03,430 --> 00:04:07,600
Similarly, there are some other modules
that you use within your Angular

59
00:04:07,600 --> 00:04:13,190
applications like the FormsModule and
also the RouterModule which have their

60
00:04:13,190 --> 00:04:18,245
own set of built-in attribute
directives that we make use of.

61
00:04:18,245 --> 00:04:22,865
Indeed, we have already made use
of them when we define forms and

62
00:04:22,865 --> 00:04:28,645
also the use the router within
our Angular application earlier.

63
00:04:28,645 --> 00:04:33,005
Now, at this point, you might be
wondering, how do I go about creating my

64
00:04:33,005 --> 00:04:37,985
own attribute directive if I'm interested
in creating a custom directive, so

65
00:04:37,985 --> 00:04:44,950
this is where we will look at how
you can derive a custom directive.

66
00:04:44,950 --> 00:04:50,470
Let's explore custom directives
in the next slide briefly and

67
00:04:50,470 --> 00:04:53,040
in the exercise that follows.

68
00:04:53,040 --> 00:04:57,280
So in custom directives your expectation
is that you would be able to implement

69
00:04:57,280 --> 00:04:58,990
what you are interested in.

70
00:04:58,990 --> 00:05:03,310
In particular, so this is where we
can create our own custom directives.

71
00:05:03,310 --> 00:05:08,660
Using the Angular CLI, you can scaffold
out the bare bones code for a directive

72
00:05:08,660 --> 00:05:13,130
and thereafter modify that code in order
to implement your custom directive.

73
00:05:13,130 --> 00:05:17,860
So when you implement a custom
directive using Angular CLI,

74
00:05:17,860 --> 00:05:19,920
it'll create a directive for you.

75
00:05:19,920 --> 00:05:24,490
And then you will immediately
notice that within the directive,

76
00:05:24,490 --> 00:05:29,880
you will be using that
directive decorator ornate

77
00:05:29,880 --> 00:05:35,290
class in order to convert
the class into a directive and

78
00:05:35,290 --> 00:05:39,410
we will encounter one such in
the exercise that follows.

79
00:05:39,410 --> 00:05:45,120
In addition, with the director, especially
when you're using attribute directives and

80
00:05:45,120 --> 00:05:50,490
you want to modify any of the elements
that are used within your templates.

81
00:05:50,490 --> 00:05:55,560
Another class that is useful for
us is called ElementRef.

82
00:05:55,560 --> 00:06:00,740
This is also important from the Angular
code, and this is injected into your

83
00:06:00,740 --> 00:06:06,130
directives constructor,
written your directive class.

84
00:06:06,130 --> 00:06:10,940
And then this enables you to
access the DOM elements and

85
00:06:10,940 --> 00:06:13,580
then make modifications to them.

86
00:06:13,580 --> 00:06:18,137
So with this quick understanding of
how you can create custom directives,

87
00:06:18,137 --> 00:06:22,351
let's look at an example in
the exercise that follows this lecture.

88
00:06:22,351 --> 00:06:28,469
[MUSIC]