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

2
00:00:04,711 --> 00:00:06,798
If you have a static website,

3
00:00:06,798 --> 00:00:11,735
then you have all the data that you
need in order to build your website.

4
00:00:11,735 --> 00:00:17,790
And it'll be created once and
your website is ready to go.

5
00:00:17,790 --> 00:00:23,208
But many websites these days
are driven by data from the backend.

6
00:00:23,208 --> 00:00:27,721
Your web application will fetch
data from a backend server and

7
00:00:27,721 --> 00:00:32,667
then use the data to dynamically
layout content on your website, or

8
00:00:32,667 --> 00:00:35,474
even update content on your website.

9
00:00:35,474 --> 00:00:40,090
So this requires the data to
flow from the backend through

10
00:00:40,090 --> 00:00:43,410
your web application to the DOM.

11
00:00:43,410 --> 00:00:49,161
And any user interaction on the DOM should
be conveyed back to your web application.

12
00:00:49,161 --> 00:00:54,211
So this requires the communication
between the DOM and

13
00:00:54,211 --> 00:00:59,920
your component in the angular
framework for example.

14
00:00:59,920 --> 00:01:03,268
Let's look at how this happens
within the angular framework and

15
00:01:03,268 --> 00:01:04,880
with a little bit more detail.

16
00:01:06,900 --> 00:01:11,420
What we have learned so
far is how a component is prepared.

17
00:01:11,420 --> 00:01:17,129
So we saw that the component has
two major parts, the typescript

18
00:01:17,129 --> 00:01:24,380
file where the component's architecture
is defined, and the properties.

19
00:01:24,380 --> 00:01:29,480
And the methods of and
then you have the template that

20
00:01:29,480 --> 00:01:34,430
defines how the content is laid out,
and added into the DOM.

21
00:01:34,430 --> 00:01:38,410
So the template is the one that is
going to supplied by a component to

22
00:01:38,410 --> 00:01:41,640
occupy a part of your webpage.

23
00:01:41,640 --> 00:01:45,870
So the template forms
the communication medium to your DOM.

24
00:01:45,870 --> 00:01:52,210
And this template requires data to be
gotten from your component in order

25
00:01:53,450 --> 00:02:00,040
to render parts of the content
on your template and

26
00:02:00,040 --> 00:02:04,105
correspondingly within
the DOM of your web page.

27
00:02:05,250 --> 00:02:11,662
Now, if you didn't have the luxury
of a framework like Angular,

28
00:02:11,662 --> 00:02:16,442
you have to deal with
the entire details about how

29
00:02:16,442 --> 00:02:21,586
the data flows from
the application site to the DOM.

30
00:02:21,586 --> 00:02:25,696
And how the user interaction
events that the caused in

31
00:02:25,696 --> 00:02:29,980
the DOM will be sent
back to your application.

32
00:02:29,980 --> 00:02:33,851
Fortunately, with frame
works like Angular,

33
00:02:33,851 --> 00:02:38,520
they support all these
behaviors inherently.

34
00:02:38,520 --> 00:02:44,047
Now we have already seen one use of
the flow of data from a components

35
00:02:44,047 --> 00:02:48,504
property to the template
in the previous exercises.

36
00:02:48,504 --> 00:02:54,433
Where we used the double curly
braces to supply information that

37
00:02:54,433 --> 00:03:02,050
is from a variable in your component's
TypeScript code, to your template.

38
00:03:02,050 --> 00:03:03,830
We'll look at other ways, and

39
00:03:03,830 --> 00:03:08,670
then also in the exercise that follows,
we will make use of this,

40
00:03:08,670 --> 00:03:14,370
to modify the angular application
that we have been developing so far.

41
00:03:15,570 --> 00:03:18,975
What we have been talking,
so far, is data binding,

42
00:03:18,975 --> 00:03:23,972
a mechanism for coordinating the flow
of information between the template and

43
00:03:23,972 --> 00:03:27,468
the component, or
between the DOM and the component.

44
00:03:27,468 --> 00:03:30,627
In the component level,
it's some kind of a property or

45
00:03:30,627 --> 00:03:35,215
a method that needs to be either supplied
to the template or invoked from the DOM.

46
00:03:35,215 --> 00:03:38,269
Or on the template side,
it may be some information

47
00:03:38,269 --> 00:03:41,890
that is required by the template
to be rendered into the DOM or

48
00:03:41,890 --> 00:03:45,905
even from the DOM captured and
sent back to your component.

49
00:03:45,905 --> 00:03:50,886
So all this requires data
flowing from the component to

50
00:03:50,886 --> 00:03:55,868
the template or
events that are gathered from the DOM or

51
00:03:55,868 --> 00:04:01,735
to be sent back to your component for
it to act upon those events.

52
00:04:01,735 --> 00:04:07,967
Now this can be easily handled in
angular framework using four different

53
00:04:07,967 --> 00:04:14,850
kinds of flow of information which
we will summarize in the next slide.

54
00:04:14,850 --> 00:04:19,150
Coming back to the interaction
between component and the template,

55
00:04:19,150 --> 00:04:22,820
we have already seen the first kind of
interaction between the component and

56
00:04:22,820 --> 00:04:27,800
the template where the value of
a property was flowing into the template.

57
00:04:27,800 --> 00:04:31,130
So we saw the use of the dish name,

58
00:04:31,130 --> 00:04:35,720
the dish description,
the dish comment details and so

59
00:04:35,720 --> 00:04:40,910
on being supplied in order to render
information in your template.

60
00:04:40,910 --> 00:04:47,210
So that is where we were using the double
braces to enclose the fact that

61
00:04:47,210 --> 00:04:53,030
a value from your component is
being used in your template.

62
00:04:53,030 --> 00:04:58,160
Another kind of flow of information
which you will see Is where

63
00:04:58,160 --> 00:05:04,930
you specify some kind of a property
associated with a tag in square brackets.

64
00:05:04,930 --> 00:05:11,670
And then assign it to be the value from
one of the properties in your component.

65
00:05:12,790 --> 00:05:17,010
This kind of approach we will
see in the exercise that follows

66
00:05:17,010 --> 00:05:19,210
right after this lecture.

67
00:05:19,210 --> 00:05:22,160
So here we would specify
something in square brackets.

68
00:05:22,160 --> 00:05:23,100
So watch out for

69
00:05:23,100 --> 00:05:28,880
an example of that in the exercise
where I will discuss more about this.

70
00:05:28,880 --> 00:05:32,640
Similarly, if you have
an event generated near DOM,

71
00:05:32,640 --> 00:05:36,840
that event may result in
the call to a handler or

72
00:05:36,840 --> 00:05:42,280
a method In your component that will
take care of handling this event.

73
00:05:42,280 --> 00:05:45,310
So the methods that
are going to be invoked by

74
00:05:45,310 --> 00:05:50,220
the events from your DOM
are referred to as handlers.

75
00:05:50,220 --> 00:05:55,670
So, the handle is nothing but,
as I said a method, which might also

76
00:05:55,670 --> 00:06:01,039
be passed in some parameter
inside the handler methods there.

77
00:06:02,790 --> 00:06:09,620
Later on, when we look at forms,
we will see a two-way data binding.

78
00:06:09,620 --> 00:06:16,190
So all the three that we have seen so
far, the flow of the value from

79
00:06:16,190 --> 00:06:20,910
the component to the template or
the property being assigned to a value or

80
00:06:20,910 --> 00:06:26,380
the event being assigned to
a handler to handle the event.

81
00:06:26,380 --> 00:06:29,780
All these are what we refer to
as one way data bindings because

82
00:06:31,010 --> 00:06:33,240
they flow only in one direction.

83
00:06:33,240 --> 00:06:37,810
You can also have bidirectional
flow where you might also see it

84
00:06:37,810 --> 00:06:41,200
in the syntax what you would
specify with square brackets.

85
00:06:41,200 --> 00:06:44,590
And then enclosed inside that
with standard parenthesis.

86
00:06:44,590 --> 00:06:47,772
An inside there you will specifies
something like an ngModel.

87
00:06:47,772 --> 00:06:52,575
You will see the use of this when it
forms later on in the next module.

88
00:06:52,575 --> 00:06:55,215
So this is where you will
assign a property to that.

89
00:06:55,215 --> 00:06:58,675
So in this case the information
flow is bidirectional.

90
00:06:58,675 --> 00:07:03,789
So any change in your DOM will be
reflected back into your property and

91
00:07:03,789 --> 00:07:05,029
the component.

92
00:07:05,029 --> 00:07:08,785
Any change in the component's property
will be reflected back to the DOM.

93
00:07:08,785 --> 00:07:12,700
Note the specific syntax that we use for

94
00:07:12,700 --> 00:07:15,918
specifying the ngModel
in this example here.

95
00:07:15,918 --> 00:07:21,100
We use a square bracket and inside that
we use the standard parenthesis in there.

96
00:07:22,390 --> 00:07:25,640
Let me now summarize what
we have just learned about

97
00:07:25,640 --> 00:07:30,620
the data binding in the previous
slide in to this table.

98
00:07:30,620 --> 00:07:36,890
So in this table, we are showing the
different ways that data binding is used.

99
00:07:36,890 --> 00:07:41,610
One-way data binding from the data
source to the view target so

100
00:07:41,610 --> 00:07:45,370
from the component to the DOM,

101
00:07:45,370 --> 00:07:51,720
we are using a double brace
expression inside there.

102
00:07:51,720 --> 00:07:55,970
This is what we refer to as
Interpolation as an example of which,

103
00:07:55,970 --> 00:08:01,080
would be the dish name, enclosed inside
the double braces as we have seen,

104
00:08:01,080 --> 00:08:06,030
used in the exercises,
in the previous module.

105
00:08:06,030 --> 00:08:11,345
Then we have, the second kind
where you enclose the target

106
00:08:11,345 --> 00:08:17,385
inside a square bracket and then assign
it to an expression on the right side.

107
00:08:17,385 --> 00:08:22,450
These expressions could be JavaScript
expressions with some limitations.

108
00:08:22,450 --> 00:08:25,600
The examples that we will
normally see would be

109
00:08:25,600 --> 00:08:30,960
using a property from one
of the classes there.

110
00:08:30,960 --> 00:08:34,390
So, this is what we referred
as a property attribute, and

111
00:08:34,390 --> 00:08:38,878
example of which you will see in
the exercise that's follows this lecture.

112
00:08:38,878 --> 00:08:44,333
Where you would see the use of a dish,
enclosed inside a square bracket,

113
00:08:44,333 --> 00:08:51,650
being equated to a selectedDish, which is
a variable declared inside a component.

114
00:08:51,650 --> 00:08:56,770
This can also be expressed
using a bind-target,

115
00:08:56,770 --> 00:08:58,680
a way of expressing the same thing.

116
00:08:58,680 --> 00:09:04,630
So both these whether you enclose a target
in square brackets or bind-target.

117
00:09:04,630 --> 00:09:07,550
So, for example, you can see bind-dish.

118
00:09:07,550 --> 00:09:11,820
So whichever way you express this,
both refer to the same thing.

119
00:09:11,820 --> 00:09:17,528
So the Property Attribute being specified
or the Class Style being specified.

120
00:09:17,528 --> 00:09:22,367
Now the one-way flow of information
from the view target to

121
00:09:22,367 --> 00:09:27,401
the data source is usually
expressed with the target enclosed

122
00:09:27,401 --> 00:09:32,780
inside parentheses here or
can also be expressed as on-target.

123
00:09:32,780 --> 00:09:36,610
And at the right hand side
would be a statement.

124
00:09:36,610 --> 00:09:41,523
A statement could be some kind of
a JavaScript expression typically

125
00:09:41,523 --> 00:09:46,532
would be in the of invocation
of a method inside a component.

126
00:09:46,532 --> 00:09:51,668
Well you will see an example in
the exercise that follows where

127
00:09:51,668 --> 00:09:57,611
you would have click inside
the parenthesis and assigned to onSelect.

128
00:09:57,611 --> 00:10:02,700
Which is a method described
inside a component

129
00:10:02,700 --> 00:10:10,540
class there with a parameter dish
being supplied to this method there.

130
00:10:10,540 --> 00:10:15,920
The two-way data binding as we saw
would be with squire and parentheses,

131
00:10:15,920 --> 00:10:21,320
squire brackets and parentheses
which is equated to an expression.

132
00:10:21,320 --> 00:10:26,380
We will see two-way data binding as a set
with forms a little bit later where

133
00:10:26,380 --> 00:10:31,843
you will use something like an ngModel,
enclosed inside the square brackets and

134
00:10:31,843 --> 00:10:35,647
parentheses, equated to
something like dish.name.

135
00:10:35,647 --> 00:10:40,438
Which connects the form
element to a property of

136
00:10:40,438 --> 00:10:44,640
a JavaScript object, in our component.

137
00:10:46,260 --> 00:10:50,240
You can also express
this as bindon-target.

138
00:10:50,240 --> 00:10:52,401
Which is another way of
saying the same thing.

139
00:10:52,401 --> 00:10:56,866
Now, this two-way data binding
that we do is sometimes

140
00:10:56,866 --> 00:11:00,630
jocularly referred to
as a banana in a box.

141
00:11:00,630 --> 00:11:04,630
So if you look at the square brackets
with the parenthesis inside it,

142
00:11:04,630 --> 00:11:06,110
it looks like a banana in a box.

143
00:11:06,110 --> 00:11:11,550
So, you might see this being used
In some of the documentation or

144
00:11:11,550 --> 00:11:14,580
in some of the blogs that you
might read on the Internet.

145
00:11:15,970 --> 00:11:19,920
Expanding further on the binding
targets that we have seen,

146
00:11:19,920 --> 00:11:23,720
the binding targets are the properties
that are declared on the left side

147
00:11:23,720 --> 00:11:27,310
of the binding declaration of
that data binding declaration.

148
00:11:27,310 --> 00:11:33,280
Typically, enclosed inside square
brackets or inside parenthesis or both.

149
00:11:33,280 --> 00:11:40,850
So the right side of the binding
expression is their binding sources,

150
00:11:40,850 --> 00:11:45,670
so which are typically like
the properties of a JavaScript object, or

151
00:11:45,670 --> 00:11:51,930
a variable, or an expression that
we define on the right hand side.

152
00:11:51,930 --> 00:11:58,970
If you define target properties associated
with the selective of a component.

153
00:11:58,970 --> 00:12:03,140
That is one way of either passing
in information into a component,

154
00:12:03,140 --> 00:12:07,320
or sending back information from
one component to another component.

155
00:12:07,320 --> 00:12:12,490
So this facilitates communication
between components.

156
00:12:12,490 --> 00:12:18,258
So you would see the use of a decorator
like @Input associated with

157
00:12:18,258 --> 00:12:24,442
a way of sending information from
one component to another component.

158
00:12:24,442 --> 00:12:29,194
We will see an example of
this usage in the exercise

159
00:12:29,194 --> 00:12:32,690
that follows this lecture here.

160
00:12:32,690 --> 00:12:37,600
Similarly, you can use the Output
decorator to specify an event

161
00:12:37,600 --> 00:12:42,070
from one component being passed
back to another component.

162
00:12:42,070 --> 00:12:49,472
So both these usages are effectively used
for communicating between components.

163
00:12:49,472 --> 00:12:52,759
[MUSIC]