1
00:00:04,300 --> 00:00:06,340
Hello, everyone, and welcome back.

2
00:00:06,790 --> 00:00:13,180
In the last lesson, we learned how to pass input data to a custom component using the square brackets,

3
00:00:13,180 --> 00:00:19,630
template syntax and input annotation here at the level of the component class.

4
00:00:20,220 --> 00:00:25,990
This lesson we are going to see, how can we make a component such as the cost curve to emit custom

5
00:00:25,990 --> 00:00:30,760
events that can be handled here at the level of the parent component?

6
00:00:30,820 --> 00:00:33,250
Let's give an example of a custom event.

7
00:00:33,280 --> 00:00:38,860
We would like to go here to our course card component and we would like to add here a button.

8
00:00:39,040 --> 00:00:43,330
When this button is pushed, the user is going to view the course.

9
00:00:43,330 --> 00:00:48,970
So it's going to be redirected to a new page that is going to display the course that corresponds to

10
00:00:48,970 --> 00:00:49,610
the card.

11
00:00:49,630 --> 00:00:56,500
So if we hit command s, we are going to see that now on each class card we have here, a new view course

12
00:00:56,500 --> 00:00:58,540
button, as we have seen before.

13
00:00:58,550 --> 00:01:03,510
We can here to this button, a click handler using the following syntax.

14
00:01:03,520 --> 00:01:08,140
We are going to arrive here between round Brace's the browser event that we want to handle.

15
00:01:08,380 --> 00:01:13,990
And here on the right hand side, we need to provide an expression that is typically a function call.

16
00:01:14,380 --> 00:01:18,490
So I'm going to add here a new method on course viewed.

17
00:01:18,880 --> 00:01:23,770
And this method needs to be part of the course card components.

18
00:01:24,040 --> 00:01:31,090
So we're going to add here a new method that is going to be called in response to this click in order

19
00:01:31,090 --> 00:01:34,230
to confirm that the cyclic handler is working correctly.

20
00:01:34,240 --> 00:01:37,350
Let's add here some logging and trade results.

21
00:01:37,390 --> 00:01:43,180
If we now open here, the console in the chrome dev tools, we are going to see that whenever we click

22
00:01:43,180 --> 00:01:45,970
here on the focus button, we're going to get here.

23
00:01:46,090 --> 00:01:48,450
The logging statement is expected.

24
00:01:48,460 --> 00:01:54,940
So this will happen independently of the care that we click noticed that the template syntax that we

25
00:01:54,940 --> 00:02:01,420
are using here for adding a click event handler, it's just another way of adding a standard browser

26
00:02:01,420 --> 00:02:02,560
event listener.

27
00:02:02,560 --> 00:02:09,310
These works as a standard browser event, which means that the click event will bubble to outside the

28
00:02:09,310 --> 00:02:11,760
component itself to outside the course.

29
00:02:12,220 --> 00:02:18,430
So this means that if we go here to our application component and we add here a click handler at the

30
00:02:18,430 --> 00:02:25,270
level of the course card itself, by using the same syntax, we are going to see that these event handler

31
00:02:25,270 --> 00:02:27,650
is going to be triggered as expected.

32
00:02:27,700 --> 00:02:28,780
Let's try this out.

33
00:02:28,780 --> 00:02:32,980
We are going to add here a click handler called Honokaa Click.

34
00:02:33,280 --> 00:02:39,460
And this function is going to exist here at the level of the application component to this event handler

35
00:02:39,460 --> 00:02:43,020
function we are going to be having here in new logging statement.

36
00:02:43,360 --> 00:02:50,290
So what is going to happen here is that when we click here on The View Button, this event handler here

37
00:02:50,290 --> 00:02:53,990
at the level of the cursor component is going to get triggered.

38
00:02:54,070 --> 00:03:00,010
These logging statement is going to be issued to the console and then the browser click event is going

39
00:03:00,010 --> 00:03:04,870
to bubble up, is going to be called here at the level of this Gleek handler.

40
00:03:04,990 --> 00:03:08,170
And then this function is going to get triggered.

41
00:03:08,290 --> 00:03:09,490
Let's try these out.

42
00:03:09,490 --> 00:03:14,780
Let's open the console and see what happens whenever we click on View Course.

43
00:03:14,980 --> 00:03:20,860
So as you can see, we have here the click handler that was triggered at the level of the card component,

44
00:03:20,860 --> 00:03:26,770
followed by the click handler at the level of the application component, using the same syntax that

45
00:03:26,770 --> 00:03:31,350
we have used to handle here, a normal browser, events such as a click event.

46
00:03:31,660 --> 00:03:34,570
We can also handle custom events.

47
00:03:34,930 --> 00:03:41,380
Let's say that instead of responding here to the click event that gets bubbled up from the View course

48
00:03:41,470 --> 00:03:46,960
button, we would like to respond here to a course selected custom event.

49
00:03:46,980 --> 00:03:49,750
So this is not a standard browser event.

50
00:03:50,110 --> 00:03:56,380
Let's rename here our function in order to reflect the fact that this is a custom browser event.

51
00:03:56,710 --> 00:04:00,550
This is going to be called the on course selected method.

52
00:04:00,700 --> 00:04:07,330
Let's then go back to our application component and rename the event handling method at the level of

53
00:04:07,330 --> 00:04:08,920
our cursor component.

54
00:04:08,920 --> 00:04:12,490
What we want to do now is to emit the custom event.

55
00:04:12,490 --> 00:04:16,839
In order to do that, we're going to need here a custom event immediately.

56
00:04:16,839 --> 00:04:24,050
So let's instantiated using the event INM class from angular core to our event.

57
00:04:24,050 --> 00:04:30,250
Zimm we can pass an optional type parameter that is going to define what type of values are getting

58
00:04:30,250 --> 00:04:31,510
embedded in this case.

59
00:04:31,510 --> 00:04:40,000
We want to emit an instance, of course, so we can use this course selective emitter to emit here a

60
00:04:40,000 --> 00:04:40,930
custom value.

61
00:04:40,930 --> 00:04:45,730
And here we can pass the value of the course that got selected.

62
00:04:45,940 --> 00:04:51,010
We can access these using these dot course with these new implementation.

63
00:04:51,010 --> 00:04:57,520
Whenever we click here on the course button, we are then going to be meeting here a custom event that

64
00:04:57,520 --> 00:05:00,370
is going to pass in the selected course as a payload.

65
00:05:00,630 --> 00:05:06,340
That will be caught here at the level of the parent component using this event handler.

66
00:05:06,450 --> 00:05:13,530
We can now retrieve the value that was emitted by the event emitter using the special Doppler event

67
00:05:13,530 --> 00:05:14,290
variable.

68
00:05:14,640 --> 00:05:21,390
This means that here on the on course selected method that we can now add here a new parameter, which

69
00:05:21,390 --> 00:05:28,980
is the value that got emitted by the event emitter, in this case, the course in order to confirm that

70
00:05:28,980 --> 00:05:31,200
we are indeed receiving here the course.

71
00:05:31,200 --> 00:05:33,310
Let's log it out to the console.

72
00:05:33,330 --> 00:05:39,540
Now, if we would try this program as it is, you might be surprised to see that on selective is not

73
00:05:39,540 --> 00:05:40,520
getting triggered.

74
00:05:40,740 --> 00:05:47,460
And this is because here in our course card component, we did not mark this event emitter as being

75
00:05:47,460 --> 00:05:49,390
an output of the component.

76
00:05:49,710 --> 00:05:57,150
So in order for our example to work, we need to adhere to the output decorator from angular core in

77
00:05:57,150 --> 00:06:01,740
order to mark this event meter as an output of these components.

78
00:06:01,830 --> 00:06:03,350
If we don't have these here.

79
00:06:03,420 --> 00:06:06,440
Then the example would not work with these in place.

80
00:06:06,450 --> 00:06:08,370
Let's not try out our example.

81
00:06:08,370 --> 00:06:15,100
As we can see, we have added here to our custom event handler only at the first of our list.

82
00:06:15,130 --> 00:06:17,880
Let's have a look at what we have then in the console.

83
00:06:17,880 --> 00:06:23,400
If we click here on the first course, we are going to see that we have here indeed the first logging

84
00:06:23,400 --> 00:06:27,330
statement then here at the level of the course card component.

85
00:06:27,480 --> 00:06:34,660
And we have here a second logging statement that was then at the level of the application component.

86
00:06:34,890 --> 00:06:43,200
So our event emitter triggered here a custom event that was caught here and on course selected was triggered

87
00:06:43,200 --> 00:06:47,970
and the course was indeed printed out to the console as expected.

88
00:06:48,000 --> 00:06:54,180
Now, if we click here on another course, let's say, for example, the last in the list, we are going

89
00:06:54,180 --> 00:07:01,050
to see that nothing happens other than we can see here the logging at the level of the course card component

90
00:07:01,290 --> 00:07:08,370
where the button click handler was triggered, but no custom event was received here at the level of

91
00:07:08,370 --> 00:07:09,650
the application component.

92
00:07:09,780 --> 00:07:16,130
And this is because we only added here an event handler to the first card of our list.

93
00:07:16,140 --> 00:07:23,670
So if we add here similar event handlers to the other cards, we are going to see that any card will

94
00:07:23,670 --> 00:07:25,360
be printed out to the console.

95
00:07:25,620 --> 00:07:27,240
Let's then try this out.

96
00:07:27,240 --> 00:07:33,210
If we tried this new version of the program, we see here that the first card was printed out here to

97
00:07:33,210 --> 00:07:33,950
the screen.

98
00:07:34,080 --> 00:07:40,050
But if we now click here on the second and on the FIR the courses, we are going to see that the correct

99
00:07:40,050 --> 00:07:42,550
that is being logged as expected.

100
00:07:42,630 --> 00:07:49,440
So as you can see, the template mechanism for handling custom events in ANGULAR looks exactly the same

101
00:07:49,440 --> 00:07:52,660
as the one for handling native browser events.

102
00:07:52,660 --> 00:07:58,840
So handling here, the native click button looks exactly the same as handling here a custom event.

103
00:07:58,890 --> 00:08:04,830
There is one important difference, though, is that these type of events, they do not bubble up the

104
00:08:04,830 --> 00:08:06,390
component hierarchy.

105
00:08:06,540 --> 00:08:15,450
So the Kalik event that was emitted here did bubble up from the course components up until here, our

106
00:08:15,450 --> 00:08:16,480
application component.

107
00:08:16,500 --> 00:08:18,860
This is just the standard browser mechanism.

108
00:08:18,870 --> 00:08:25,410
It's not angular doing the bubbling of the event, but these custom events, unlike the native event,

109
00:08:25,410 --> 00:08:27,210
will not bubble up.

110
00:08:27,240 --> 00:08:34,730
Also notice that the name of our custom event is exactly the same as the name here of our event emitter.

111
00:08:34,990 --> 00:08:41,010
And this is because Angular takes the name of the event from the name of the meter if nothing else gets

112
00:08:41,010 --> 00:08:41,900
specified.

113
00:08:41,940 --> 00:08:46,090
Let's say that we will now rename this variable to Cause Emitter.

114
00:08:46,110 --> 00:08:53,760
So if we will do so, then our example will no longer work, because here in the template we are expecting

115
00:08:53,760 --> 00:08:59,860
an output event named Core Selector and there is and here and emitter named like that.

116
00:08:59,970 --> 00:09:06,570
So if we want to define here at the level of the output decorator a different name for the custom event

117
00:09:06,570 --> 00:09:11,800
other than the name that we have here for the event emitter, we can use here the string parameter.

118
00:09:12,150 --> 00:09:19,620
So if we now specify here a value, then this is going to be the name of the custom event linked to

119
00:09:19,620 --> 00:09:20,400
this emitter.

120
00:09:20,550 --> 00:09:26,570
So if we know retry our application, we are going to see that everything is still working as expected.

121
00:09:26,850 --> 00:09:32,370
So if we head over here to the console and we hit here, for example, the second candidate with the

122
00:09:32,370 --> 00:09:37,170
least, we are going to see that our custom event is still being triggered.

123
00:09:37,500 --> 00:09:41,840
And with these, we have covered the angular component inputs and outputs.

124
00:09:42,150 --> 00:09:48,260
What we're going to do next is we are going to start covering several of the core directive's of ANGULAR.

125
00:09:48,570 --> 00:09:53,400
Let's start with the most commonly used end G4 and NGF.