1
00:00:04,000 --> 00:00:06,050
Hello, everyone, and welcome back.

2
00:00:06,220 --> 00:00:11,310
In this lesson, we are going to continue to explore some of the key features of angular code.

3
00:00:11,710 --> 00:00:15,840
We're going to talk about input properties, browser events.

4
00:00:15,850 --> 00:00:20,230
We're going to talk about automatic synchronization between the data and the view.

5
00:00:20,440 --> 00:00:25,340
And we're going to demonstrate some of the angular core built-In security features.

6
00:00:25,630 --> 00:00:29,620
Let's now have a look at some of the things that we can do with our templates.

7
00:00:29,950 --> 00:00:36,760
Let's start by adding here an input box that we are going to be using for modifying the data model of

8
00:00:36,760 --> 00:00:37,930
our application.

9
00:00:38,260 --> 00:00:45,370
Let's add here and input e-mail tag and let's add a class for the purposes of this demonstration.

10
00:00:45,370 --> 00:00:52,200
Let's call the Sears's class demo and we are going to start seeing how can we style angular components.

11
00:00:52,510 --> 00:00:59,470
So as we can see here, linked to this application component class, we have here a style file that

12
00:00:59,470 --> 00:01:00,790
was currently empty.

13
00:01:01,150 --> 00:01:07,900
We can use it here to define a series of styles that are only going to be visible inside our application

14
00:01:07,900 --> 00:01:08,500
component.

15
00:01:08,800 --> 00:01:15,100
Let's quickly add here some styles and we will be covering angular components, styling in detail later

16
00:01:15,100 --> 00:01:15,850
in this course.

17
00:01:16,090 --> 00:01:22,840
Right now, let's simply add here a simple e-mail selector that is going to select as an input filled

18
00:01:22,840 --> 00:01:26,430
with class demo inside this particular component.

19
00:01:26,530 --> 00:01:29,350
And let's add here a couple of very simple styles.

20
00:01:29,360 --> 00:01:36,820
So I'm going to paste in here just a couple of styles so that we can see better the input on the screen

21
00:01:37,000 --> 00:01:38,760
now that the styles are applied.

22
00:01:38,770 --> 00:01:45,940
Let's go back here to our template and let's link our input data, which is available here under this

23
00:01:45,940 --> 00:01:48,820
data, object to this input field.

24
00:01:49,120 --> 00:01:53,830
In order to do that, we can, for example, use here the value property.

25
00:01:54,160 --> 00:02:00,400
So if we add here a string hardcoded, this is just like a plain input e-mail.

26
00:02:00,400 --> 00:02:06,800
We can see here that the text that we pass here to the value property gets reflected here on the screen.

27
00:02:07,030 --> 00:02:14,440
Now, if we want to pass it here, our data titled Property, we need to use the following special angular

28
00:02:14,440 --> 00:02:15,130
syntax.

29
00:02:15,460 --> 00:02:21,190
And the fact that we are surrounding it with brackets is going to tell Angular that the content here

30
00:02:21,190 --> 00:02:24,820
of the string is no longer a plain string.

31
00:02:24,820 --> 00:02:27,550
This will instead become an expression.

32
00:02:27,550 --> 00:02:34,480
So we can based in here inside this value property, the value of the data, the title expression,

33
00:02:34,780 --> 00:02:41,200
if we hit control as we are going to see that we now get here on the screen, the title of the course.

34
00:02:41,380 --> 00:02:48,250
As we can see, these input properties, Syntex, that we have here is how we can pass data to the template.

35
00:02:48,530 --> 00:02:55,020
We could also pass here to the value property using these input properties, syntax, a plain string.

36
00:02:55,030 --> 00:03:01,840
So in order to do that, we would need to see around here the string in quotes if we know hit command

37
00:03:01,840 --> 00:03:04,300
s, we're going to see that we get here again.

38
00:03:04,300 --> 00:03:05,860
These hardcoded string.

39
00:03:06,190 --> 00:03:13,090
This is sometimes used, but if we want to pass in a plain hardcoded string, we can simply use plain

40
00:03:13,090 --> 00:03:14,370
HTML for that.

41
00:03:14,590 --> 00:03:17,920
There is no need to use a special angular syntax.

42
00:03:18,280 --> 00:03:25,780
The angular input properties syntax is useful really in the case where we want to pass in some data

43
00:03:25,780 --> 00:03:28,920
that is available at the level of the component class.

44
00:03:28,960 --> 00:03:32,650
Let's see what else we can do with the angular template syntax.

45
00:03:32,650 --> 00:03:36,790
And the other thing that we can do is handle Browsr native events.

46
00:03:37,000 --> 00:03:42,070
Let's say that, for example, we have here a native click event that we want to detect whenever we

47
00:03:42,070 --> 00:03:44,130
click on the Engelhard Shield.

48
00:03:44,140 --> 00:03:48,600
And in response to that, we would like to display an alert box to the user.

49
00:03:48,820 --> 00:03:50,500
We can do that in the following way.

50
00:03:50,500 --> 00:03:56,170
We need to handle here at the level of the image, the click event and for handling events.

51
00:03:56,170 --> 00:04:03,610
We have the round Brace's syntax and we're going to specify here what event exactly we want to handle

52
00:04:03,610 --> 00:04:05,410
in this case, the click event.

53
00:04:05,680 --> 00:04:12,520
And on response to the event, we need to specify here an expression that is going to tell Angular how

54
00:04:12,520 --> 00:04:14,050
to handle the events.

55
00:04:14,350 --> 00:04:23,170
So we are going to create here a new function on logo Glik that does not exist yet in our component,

56
00:04:23,170 --> 00:04:25,560
but we are going to add it now ourselves.

57
00:04:25,570 --> 00:04:32,140
What is important to keep in mind here is that any function that we call here is going to be resolved

58
00:04:32,380 --> 00:04:33,790
using the component.

59
00:04:34,120 --> 00:04:41,920
So this function here is going to be called and here we can add any logic that we need that will respond

60
00:04:41,920 --> 00:04:42,610
to the Cleek.

61
00:04:42,610 --> 00:04:45,900
So in this case, we are going to add here and alert box.

62
00:04:45,910 --> 00:04:46,810
Hello world.

63
00:04:46,990 --> 00:04:48,580
Let's have a look at this in action.

64
00:04:48,880 --> 00:04:54,790
If we now click here in our image, we would see here an alert box saying hello, world.

65
00:04:54,970 --> 00:05:00,310
As expected, we say it's handling input properties and Browsr native events and.

66
00:05:00,350 --> 00:05:06,110
The other thing that we can do at the level of our template, using angular specific syntax, is to

67
00:05:06,110 --> 00:05:09,620
give to certain elements of the page and name.

68
00:05:09,830 --> 00:05:12,440
For example, using here the hash syntax.

69
00:05:12,680 --> 00:05:15,310
We can give a name to this input box.

70
00:05:15,320 --> 00:05:17,420
We are going to call it title input.

71
00:05:17,840 --> 00:05:20,110
This is called a template reference.

72
00:05:20,420 --> 00:05:27,610
We can now use this reference to refer to this input box in other parts of our template.

73
00:05:27,950 --> 00:05:34,340
The reference can also be injected here at the level of our component, as we will see later in this

74
00:05:34,340 --> 00:05:34,860
course.

75
00:05:35,150 --> 00:05:41,560
Right now, let's see how the template reference for the input can be used here directly in our input.

76
00:05:41,930 --> 00:05:49,190
We're going to start by detecting here the Kiip event at the level of this input and in response to

77
00:05:49,190 --> 00:05:53,740
this Kiip event, we are going to call here the on Kiip method.

78
00:05:53,750 --> 00:05:58,030
This method is going to be added here to our application component.

79
00:05:58,550 --> 00:06:05,660
What we want to do is to pass to this method that we are calling here the current value of the input

80
00:06:05,660 --> 00:06:06,010
box.

81
00:06:06,010 --> 00:06:13,790
So as the user types here in our input box, we want to be able to pass the new value to the component.

82
00:06:14,060 --> 00:06:20,510
The component is going to then take the latest value that we have typed here and it's going to automatically

83
00:06:20,510 --> 00:06:22,310
update the template.

84
00:06:22,430 --> 00:06:29,210
In order to implement this logic, we need to somehow get the current value of the input we can do.

85
00:06:29,210 --> 00:06:31,580
So using here the template reference.

86
00:06:31,850 --> 00:06:38,640
So the template reference is simply pointing to the native DOM element that corresponds to the input.

87
00:06:38,930 --> 00:06:46,110
So if we call here the property value, we are going to be accessing the current value of the input.

88
00:06:46,250 --> 00:06:53,600
Now, at the level of our component, we have received here the new title that we have just passed into

89
00:06:53,600 --> 00:07:01,580
the call to on Kiip, and we are going to be able to use it to modify the model of our application so

90
00:07:01,580 --> 00:07:06,830
we can do that by accessing via the D key word here, the data object.

91
00:07:07,100 --> 00:07:14,130
And we can assign to this title property the new title of value that we have just received.

92
00:07:14,420 --> 00:07:15,940
Let's check this in action.

93
00:07:16,280 --> 00:07:22,490
We have now refreshed the application and if we now start erasing here the title of the course, we

94
00:07:22,490 --> 00:07:28,050
are going to see that the title is being reflected here automatically in our view.

95
00:07:28,130 --> 00:07:34,580
So what you see here is one of the core features of ANGULAR, one of the most important features of

96
00:07:34,580 --> 00:07:42,950
the angular core module, this feature of automatically reflecting in the view any modification that

97
00:07:42,950 --> 00:07:44,340
we do to the data.

98
00:07:44,560 --> 00:07:51,680
Notice that in our program, we did not have to have any specific logic to call ANGULAR to request an

99
00:07:51,680 --> 00:07:52,810
update of The View.

100
00:07:53,000 --> 00:07:56,540
We did not have to update the view manually ourselves.

101
00:07:56,780 --> 00:08:03,290
This is being taken care of by angular automatically in a transparent way behind the scenes, and it's

102
00:08:03,290 --> 00:08:09,830
then in an optimal way, Angular is going to keep track of the changes that we are making to our data.

103
00:08:10,010 --> 00:08:14,500
And Angular is going to update the view in an optimal way.

104
00:08:14,750 --> 00:08:18,860
Only the parts of the view that need to be changed will be changed.

105
00:08:19,070 --> 00:08:24,800
Another very important feature of angular core is that the synchronization between the model of our

106
00:08:24,800 --> 00:08:29,950
application and the view, which is represented by the template, is then in a secure way.

107
00:08:30,110 --> 00:08:36,590
So let's say that, for example, here at the level of our title, some attacker was attempting to inject

108
00:08:36,590 --> 00:08:39,820
some coal in the browser instead of a string.

109
00:08:40,130 --> 00:08:46,370
If we tried to inject here some e-mail, what we're going to see is that ANGULAR is going to detect

110
00:08:46,610 --> 00:08:54,440
that this string here data, that title is being used here in a context that expects a plain string

111
00:08:54,620 --> 00:08:58,120
and it's going to apply the appropriate e-mail escaping.

112
00:08:58,130 --> 00:09:03,410
So as you can see here, this code here works correctly, escape.

113
00:09:03,440 --> 00:09:09,590
This was not interpreted as HTML instead of the escaping took place.

114
00:09:09,980 --> 00:09:11,750
Let's have a look at another example.

115
00:09:11,900 --> 00:09:16,320
Let's say that the attacker was trying to inject here a script.

116
00:09:16,340 --> 00:09:22,370
So this is a more malicious attack instead of simply trying to modify the HTML on the page and change

117
00:09:22,370 --> 00:09:27,920
the look and feel of the page, the attacker is actually trying to inject some code into the user's

118
00:09:27,920 --> 00:09:28,500
browser.

119
00:09:28,940 --> 00:09:34,880
Let's try, for example, to open here an alert box, which is a common way of simulating an attack.

120
00:09:35,240 --> 00:09:40,030
If we tried to inject the string here in our template, take a look to see what happens.

121
00:09:40,090 --> 00:09:43,700
Again, this was not interpreted as JavaScript.

122
00:09:43,700 --> 00:09:46,250
We did not see here an alert box.

123
00:09:46,610 --> 00:09:48,710
Everything was escape's.

124
00:09:48,710 --> 00:09:51,950
And we can see here the script tag on the screen.

125
00:09:52,180 --> 00:09:58,010
Notice that we did not have to do anything special to benefit from this security protection.

126
00:09:58,250 --> 00:10:00,080
This is all built in by.

127
00:10:00,170 --> 00:10:03,960
Angular and it's completely transparent to the application developer.

128
00:10:04,430 --> 00:10:07,890
Let's then summarize what are the key features of ANGULAR?

129
00:10:08,210 --> 00:10:15,380
We have the ability of defining our own custom tags and extend standard browser functionality.

130
00:10:15,620 --> 00:10:23,360
We have also a way of clearly separating in our application, the data or the model of our application

131
00:10:23,570 --> 00:10:26,030
from The View, which is our template.

132
00:10:26,240 --> 00:10:32,030
And we have here a component mechanism that coordinates the interaction between both things.

133
00:10:32,090 --> 00:10:38,990
We also have a built in change detection mechanism, which is completely transparent and that automatically

134
00:10:38,990 --> 00:10:42,130
synchronizes the data with the view.

135
00:10:42,170 --> 00:10:44,870
We don't ever have to write code again.

136
00:10:45,110 --> 00:10:47,280
That does the synchronization manually.

137
00:10:47,480 --> 00:10:48,920
This is done automatically.

138
00:10:49,070 --> 00:10:56,380
And last but not least, the update of our view with new data is then in a secure way, as we have seen.

139
00:10:56,630 --> 00:11:03,350
So if we simply fetch data from the backend and provided here to our component, we are sure that our

140
00:11:03,350 --> 00:11:10,940
application will not suffer from many of the common security attacks that typically this type of applications

141
00:11:11,090 --> 00:11:12,530
are submitted to.

142
00:11:12,740 --> 00:11:16,950
And these, in a nutshell, are the main features of angular core.

143
00:11:17,240 --> 00:11:20,780
This is what a Web framework gives us out of the box.

144
00:11:20,930 --> 00:11:26,120
In the remainder of the course, we are going to explore in detail all the options that we have available

145
00:11:26,120 --> 00:11:28,850
for building our own custom components.

146
00:11:29,000 --> 00:11:31,330
So that's exactly what we are going to do next.

147
00:11:31,340 --> 00:11:35,870
We are going to build our own custom angular component from scratch.