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

2
00:00:04,518 --> 00:00:09,098
In the previous exercise, we saw the use
of our first structural directive,

3
00:00:09,098 --> 00:00:09,812
the ngFor.

4
00:00:09,812 --> 00:00:15,186
Let's ask ourselves a few more questions
about structural directives and

5
00:00:15,186 --> 00:00:19,970
learn how they are useful when we
write our Angular applications.

6
00:00:22,000 --> 00:00:26,110
Structural directives
are one kind of directives.

7
00:00:26,110 --> 00:00:30,628
So directives is a general umbrella
under which you have components,

8
00:00:30,628 --> 00:00:35,847
then you have structural directives,
and then you have attribute directives.

9
00:00:35,847 --> 00:00:39,015
So let's learn a little
bit more about directives.

10
00:00:39,015 --> 00:00:43,121
So what we realize is the Angular
templates are dynamic, so they need to be

11
00:00:43,121 --> 00:00:47,379
created on the fly, there will be a lot
of manipulation to be done on the DOM.

12
00:00:47,379 --> 00:00:52,721
So, what the directives help us is
to enable us to give instructions

13
00:00:52,721 --> 00:00:57,710
to the Angular on how to render
the templates to the DOM.

14
00:00:57,710 --> 00:01:00,900
So, they use directives
to give instructions

15
00:01:00,900 --> 00:01:04,880
to Angular as it is rendering
the templates on the screen.

16
00:01:04,880 --> 00:01:10,120
So, in general, a directive can be
defined directly in Angular using

17
00:01:10,120 --> 00:01:14,520
a class with the @Directive decorator.

18
00:01:14,520 --> 00:01:19,044
We well see an example of
a directive that we can ourselves

19
00:01:19,044 --> 00:01:22,630
create a little bit later in this course.

20
00:01:22,630 --> 00:01:25,258
For the moment,
we'll look at the building directives.

21
00:01:25,258 --> 00:01:26,587
And in particular,

22
00:01:26,587 --> 00:01:32,650
we have already encountered our first kind
of the directive, which is a component.

23
00:01:32,650 --> 00:01:35,060
A component is a special
kind of directive and

24
00:01:35,060 --> 00:01:39,800
Angular, which has its own
template associated with it.

25
00:01:39,800 --> 00:01:45,700
And we have already seen how we
can leverage a component to define

26
00:01:45,700 --> 00:01:50,420
parts of our layout for
our application's screen.

27
00:01:51,910 --> 00:01:57,610
As I mentioned, there are two other
kinds of directives in Angular,

28
00:01:57,610 --> 00:02:00,465
structural and attribute directives.

29
00:02:00,465 --> 00:02:05,138
We'll quickly examine structural
directives in this lesson.

30
00:02:05,138 --> 00:02:09,359
And then we will look at attribute
directives a little bit later in

31
00:02:09,359 --> 00:02:10,290
this course.

32
00:02:11,400 --> 00:02:15,608
So what are structural directives and
how are they useful for us?

33
00:02:15,608 --> 00:02:19,590
What we realize as we use
structural directives are,

34
00:02:19,590 --> 00:02:24,910
they help us to alter
the layout of our content

35
00:02:24,910 --> 00:02:30,020
by helping us to add and
remove elements from the DOM.

36
00:02:30,020 --> 00:02:33,800
In particular,
note the use of the term add and

37
00:02:33,800 --> 00:02:37,460
remove and replacing elements in the DOM.

38
00:02:37,460 --> 00:02:41,720
So you are literally using
the structural directives to manipulate

39
00:02:41,720 --> 00:02:44,640
your DOM of your webpage.

40
00:02:44,640 --> 00:02:51,124
So, you can use the structural directives
by applying them to a host element,

41
00:02:51,124 --> 00:02:56,738
typically a div or a list item in
the DOM and also to its descendents.

42
00:02:56,738 --> 00:02:59,435
We have already seen the user,

43
00:02:59,435 --> 00:03:04,840
the ngFor structural directive,
in the previous exercise.

44
00:03:04,840 --> 00:03:11,650
And we saw how we use the ngFor to
loop through an array of dishes,

45
00:03:11,650 --> 00:03:17,020
and then layout each one of them to
construct the menu for our restaurant.

46
00:03:18,480 --> 00:03:22,870
Here, I will briefly mention some of the
common structural directives that you will

47
00:03:22,870 --> 00:03:27,180
encounter as you write
your Angular partition.

48
00:03:27,180 --> 00:03:31,520
One of the most common structural
directives that you will see is the ngIf

49
00:03:31,520 --> 00:03:32,620
directive.

50
00:03:32,620 --> 00:03:40,710
When you use it in your template
syntax you will write it as *ngIf,

51
00:03:40,710 --> 00:03:45,800
so this is how this directive
is used in your DOM.

52
00:03:45,800 --> 00:03:50,973
So, for example, if you apply
the ngIf directive to a div like

53
00:03:50,973 --> 00:03:56,050
this in this example,
what you're specifying where is that

54
00:03:56,050 --> 00:04:01,845
if the selectedDish is not null then
this div will be added to the DOM.

55
00:04:01,845 --> 00:04:05,287
If that selectedDish is null,
then this div,

56
00:04:05,287 --> 00:04:10,053
whatever is contained in this div
will not be added to the DOM, so

57
00:04:10,053 --> 00:04:15,965
you are literally removing this from the
DOM if the value turns out to be false.

58
00:04:15,965 --> 00:04:19,800
If it turns out to be true,
then it is added into the dump.

59
00:04:19,800 --> 00:04:24,280
Similarly, we saw the use
of the ngFor directive.

60
00:04:24,280 --> 00:04:29,580
So, where we defined, for example,
for the md-list-item in the previous

61
00:04:29,580 --> 00:04:35,470
exercise we said *ngFor and
said, let dish of dishes.

62
00:04:35,470 --> 00:04:40,750
So this allows us to iterate
over the array of dishes

63
00:04:40,750 --> 00:04:46,925
that are defined in our type script coat.

64
00:04:46,925 --> 00:04:55,570
Another structural directive that might
find common use is the NgSwitch directive.

65
00:04:55,570 --> 00:04:57,840
Although I don't have
an example right now,

66
00:04:57,840 --> 00:05:02,940
later on in this course we will encounter
the use of the NgSwitch directive.

67
00:05:02,940 --> 00:05:07,080
This allows you to selectively
add certain elements to the DOM

68
00:05:07,080 --> 00:05:11,940
by specifying a condition, depending
on what the condition evaluates to,

69
00:05:11,940 --> 00:05:17,060
then you will be using one of
those elements among the list.

70
00:05:17,060 --> 00:05:21,858
If you are familiar with switch
statement from C++ or Java,

71
00:05:21,858 --> 00:05:25,250
the NgSwitch seems very familiar to you.

72
00:05:25,250 --> 00:05:29,710
So it'll act similar to
the switch statement that you

73
00:05:29,710 --> 00:05:32,295
are used to from Java or C++.

74
00:05:32,295 --> 00:05:35,675
With the short discussion
on structural directives,

75
00:05:35,675 --> 00:05:40,748
let's move on to the next exercise where
we will continue examining components.

76
00:05:40,748 --> 00:05:47,459
[MUSIC]