1
00:00:00,210 --> 00:00:05,610
In this lecture, we're going to learn how to listen for events in our templates at the moment.

2
00:00:05,700 --> 00:00:07,710
The image will always remain the same.

3
00:00:07,980 --> 00:00:13,050
I think it would be cool if we could dynamically swamp this image with another image.

4
00:00:13,260 --> 00:00:14,940
Let's try giving it a shot.

5
00:00:15,210 --> 00:00:18,300
Open the app component template in your editor.

6
00:00:20,970 --> 00:00:23,250
Elements can emit various events.

7
00:00:23,520 --> 00:00:28,680
Normally we would listen for an event by selecting the element with a query function.

8
00:00:29,010 --> 00:00:32,850
Afterward, we would attach an event listener to the elements.

9
00:00:33,210 --> 00:00:37,950
Angular provides an easier way to attach event listeners on elements.

10
00:00:38,250 --> 00:00:43,230
Actually, I would even go as far to say it's better than vanilla JavaScript.

11
00:00:43,860 --> 00:00:46,710
The syntax is easier to read and write.

12
00:00:47,070 --> 00:00:50,040
All browser events are supported in angular.

13
00:00:50,280 --> 00:00:54,900
We can handle clicks, form submissions, keyboard events, et cetera.

14
00:00:55,290 --> 00:00:57,570
Custom events are supported, too.

15
00:00:57,870 --> 00:01:01,710
We'll look at how to create custom events in a future lecture.

16
00:01:01,980 --> 00:01:06,750
For now, we're going to focus on browser events above the image.

17
00:01:06,760 --> 00:01:09,240
We're going to add an input element.

18
00:01:11,740 --> 00:01:17,530
Through this element, we will allow users to change the image before we move forward.

19
00:01:17,620 --> 00:01:19,060
Let's add some spacing.

20
00:01:19,360 --> 00:01:21,520
Open the app stylesheet file.

21
00:01:23,940 --> 00:01:26,130
We will select the input element.

22
00:01:28,510 --> 00:01:31,360
They display property will be set to block.

23
00:01:33,760 --> 00:01:37,030
The margin your property will be set to 10 zero.

24
00:01:39,500 --> 00:01:41,390
That'll give us some good spacing.

25
00:01:41,570 --> 00:01:44,900
Let's go back to the templates on the input element.

26
00:01:44,990 --> 00:01:47,990
We are going to listen for an event called Key Up.

27
00:01:50,620 --> 00:01:53,590
Events can be written like attributes on an element.

28
00:01:53,800 --> 00:01:57,250
We need to wrap the event with a pair of parentheses.

29
00:01:59,740 --> 00:02:05,500
If we omitted the parentheses, Angular would interpret this event as a regular attributes.

30
00:02:05,830 --> 00:02:10,180
It's important to wrap the event with parentheses at this point.

31
00:02:10,300 --> 00:02:12,460
You may have started to notice a pattern.

32
00:02:12,880 --> 00:02:17,140
Each HTML template files are not regular HTML files.

33
00:02:17,470 --> 00:02:23,290
Angular enhances templates with additional syntax for interacting with the documents.

34
00:02:23,980 --> 00:02:27,430
This set of features are why developers love angular.

35
00:02:27,880 --> 00:02:32,330
Our components, template and logic are separate at the same time.

36
00:02:32,380 --> 00:02:34,930
They're not entirely decoupled from one another.

37
00:02:35,230 --> 00:02:41,800
We can apply special syntax to our templates to bind properties and events without angular.

38
00:02:41,950 --> 00:02:47,470
The browser wouldn't know how to handle this syntax back to the task at hand.

39
00:02:47,830 --> 00:02:51,160
Normally, events are prefixed with the word on.

40
00:02:51,550 --> 00:02:55,300
We can safely omit the on key word from the event name.

41
00:02:55,630 --> 00:02:58,120
This applies to all browser events.

42
00:02:58,510 --> 00:03:02,950
Angular automatically attaches this keyword to your event bindings.

43
00:03:03,310 --> 00:03:06,850
The key up event will fire after a key has been released.

44
00:03:07,120 --> 00:03:10,960
We can use this event to help us detect changes in the inputs.

45
00:03:11,260 --> 00:03:17,170
The value of this event can be an expression we're going to instruct Angular to run a method.

46
00:03:17,470 --> 00:03:22,450
We will run a method called change image with the event object passed in.

47
00:03:25,010 --> 00:03:28,310
On the one hand, we could handle the logic in the template.

48
00:03:28,550 --> 00:03:30,530
However, that's not recommended.

49
00:03:30,770 --> 00:03:34,340
We should outsource complex logic into the class.

50
00:03:34,760 --> 00:03:37,940
The template should listen to events afterward.

51
00:03:37,970 --> 00:03:41,030
It can pass on event handling to our class.

52
00:03:41,600 --> 00:03:45,740
Angular will provide us with an object called event in the template.

53
00:03:46,100 --> 00:03:49,190
We can pass it on to our components methods.

54
00:03:49,550 --> 00:03:54,200
Let's help the user by providing the initial URL to the image.

55
00:03:54,620 --> 00:03:56,390
Try this as an exercise.

56
00:03:56,630 --> 00:04:01,250
I want you to set the value attribute to the URL in the class.

57
00:04:01,590 --> 00:04:03,440
Has the video and good luck.

58
00:04:06,040 --> 00:04:06,880
Welcome back.

59
00:04:07,150 --> 00:04:10,090
If you're able to tackle this problem, that's great.

60
00:04:10,300 --> 00:04:12,070
If not, that's fine as well.

61
00:04:12,280 --> 00:04:15,580
Let's tackle it together on the input element.

62
00:04:15,760 --> 00:04:20,620
We're going to bind the value attribute to the image you are L property.

63
00:04:23,230 --> 00:04:30,550
Be sure to wrap the value attribute with square brackets, otherwise angular will not be able to process

64
00:04:30,550 --> 00:04:33,040
the expression in the attributes value.

65
00:04:33,400 --> 00:04:37,080
There is a distinction between binding events and properties.

66
00:04:37,420 --> 00:04:40,480
Property binding is performed with square brackets.

67
00:04:40,780 --> 00:04:45,170
Event binding is performed with parentheses moving along.

68
00:04:45,250 --> 00:04:50,110
Let's write the method for handling the event back in the component class.

69
00:04:50,200 --> 00:04:52,000
We're going to define the method.

70
00:04:54,670 --> 00:04:58,030
We're going to accept the event argument as E!

71
00:04:58,330 --> 00:05:02,470
This argument should be annotated with the keyboard event type.

72
00:05:05,040 --> 00:05:11,400
Where annotating the argument with the keyboard event object to help TypeScript understand the object.

73
00:05:11,730 --> 00:05:16,740
If you were to look around, the keyword event type is not defined in our class.

74
00:05:16,950 --> 00:05:19,250
Luckily, we don't have to define it.

75
00:05:19,590 --> 00:05:23,880
Angular has configured TypeScript to include types for the DOM.

76
00:05:24,090 --> 00:05:26,730
This includes types for browser events.

77
00:05:26,970 --> 00:05:32,700
The keyboard event type can be annotated on objects that represent keyboard events.

78
00:05:33,090 --> 00:05:36,420
Remember, we want type safety in our application.

79
00:05:36,690 --> 00:05:41,760
We want to make sure we're receiving the correct type of object when calling this method.

80
00:05:42,210 --> 00:05:47,670
The key up event will give us a keyboard event object inside this method.

81
00:05:47,820 --> 00:05:54,840
We're going to set the image URL property to the event dot target dot value property.

82
00:05:57,430 --> 00:06:01,870
After saving the file, we're going to receive an error in the console.

83
00:06:02,020 --> 00:06:08,560
The error is telling us the value property does not exist on the event target object, which doesn't

84
00:06:08,560 --> 00:06:12,700
make sense because we aren't using this object or so it seems.

85
00:06:13,000 --> 00:06:16,900
In the following lecture, let's explore this issue in depth.