Hello, everyone, and welcome back.
In the last lesson, we learned how to pass input data to a custom component using the square brackets,
template syntax and input annotation here at the level of the component class.
This lesson we are going to see, how can we make a component such as the cost curve to emit custom
events that can be handled here at the level of the parent component?
Let's give an example of a custom event.
We would like to go here to our course card component and we would like to add here a button.
When this button is pushed, the user is going to view the course.
So it's going to be redirected to a new page that is going to display the course that corresponds to
the card.
So if we hit command s, we are going to see that now on each class card we have here, a new view course
button, as we have seen before.
We can here to this button, a click handler using the following syntax.
We are going to arrive here between round Brace's the browser event that we want to handle.
And here on the right hand side, we need to provide an expression that is typically a function call.
So I'm going to add here a new method on course viewed.
And this method needs to be part of the course card components.
So we're going to add here a new method that is going to be called in response to this click in order
to confirm that the cyclic handler is working correctly.
Let's add here some logging and trade results.
If we now open here, the console in the chrome dev tools, we are going to see that whenever we click
here on the focus button, we're going to get here.
The logging statement is expected.
So this will happen independently of the care that we click noticed that the template syntax that we
are using here for adding a click event handler, it's just another way of adding a standard browser
event listener.
These works as a standard browser event, which means that the click event will bubble to outside the
component itself to outside the course.
So this means that if we go here to our application component and we add here a click handler at the
level of the course card itself, by using the same syntax, we are going to see that these event handler
is going to be triggered as expected.
Let's try this out.
We are going to add here a click handler called Honokaa Click.
And this function is going to exist here at the level of the application component to this event handler
function we are going to be having here in new logging statement.
So what is going to happen here is that when we click here on The View Button, this event handler here
at the level of the cursor component is going to get triggered.
These logging statement is going to be issued to the console and then the browser click event is going
to bubble up, is going to be called here at the level of this Gleek handler.
And then this function is going to get triggered.
Let's try these out.
Let's open the console and see what happens whenever we click on View Course.
So as you can see, we have here the click handler that was triggered at the level of the card component,
followed by the click handler at the level of the application component, using the same syntax that
we have used to handle here, a normal browser, events such as a click event.
We can also handle custom events.
Let's say that instead of responding here to the click event that gets bubbled up from the View course
button, we would like to respond here to a course selected custom event.
So this is not a standard browser event.
Let's rename here our function in order to reflect the fact that this is a custom browser event.
This is going to be called the on course selected method.
Let's then go back to our application component and rename the event handling method at the level of
our cursor component.
What we want to do now is to emit the custom event.
In order to do that, we're going to need here a custom event immediately.
So let's instantiated using the event INM class from angular core to our event.
Zimm we can pass an optional type parameter that is going to define what type of values are getting
embedded in this case.
We want to emit an instance, of course, so we can use this course selective emitter to emit here a
custom value.
And here we can pass the value of the course that got selected.
We can access these using these dot course with these new implementation.
Whenever we click here on the course button, we are then going to be meeting here a custom event that
is going to pass in the selected course as a payload.
That will be caught here at the level of the parent component using this event handler.
We can now retrieve the value that was emitted by the event emitter using the special Doppler event
variable.
This means that here on the on course selected method that we can now add here a new parameter, which
is the value that got emitted by the event emitter, in this case, the course in order to confirm that
we are indeed receiving here the course.
Let's log it out to the console.
Now, if we would try this program as it is, you might be surprised to see that on selective is not
getting triggered.
And this is because here in our course card component, we did not mark this event emitter as being
an output of the component.
So in order for our example to work, we need to adhere to the output decorator from angular core in
order to mark this event meter as an output of these components.
If we don't have these here.
Then the example would not work with these in place.
Let's not try out our example.
As we can see, we have added here to our custom event handler only at the first of our list.
Let's have a look at what we have then in the console.
If we click here on the first course, we are going to see that we have here indeed the first logging
statement then here at the level of the course card component.
And we have here a second logging statement that was then at the level of the application component.
So our event emitter triggered here a custom event that was caught here and on course selected was triggered
and the course was indeed printed out to the console as expected.
Now, if we click here on another course, let's say, for example, the last in the list, we are going
to see that nothing happens other than we can see here the logging at the level of the course card component
where the button click handler was triggered, but no custom event was received here at the level of
the application component.
And this is because we only added here an event handler to the first card of our list.
So if we add here similar event handlers to the other cards, we are going to see that any card will
be printed out to the console.
Let's then try this out.
If we tried this new version of the program, we see here that the first card was printed out here to
the screen.
But if we now click here on the second and on the FIR the courses, we are going to see that the correct
that is being logged as expected.
So as you can see, the template mechanism for handling custom events in ANGULAR looks exactly the same
as the one for handling native browser events.
So handling here, the native click button looks exactly the same as handling here a custom event.
There is one important difference, though, is that these type of events, they do not bubble up the
component hierarchy.
So the Kalik event that was emitted here did bubble up from the course components up until here, our
application component.
This is just the standard browser mechanism.
It's not angular doing the bubbling of the event, but these custom events, unlike the native event,
will not bubble up.
Also notice that the name of our custom event is exactly the same as the name here of our event emitter.
And this is because Angular takes the name of the event from the name of the meter if nothing else gets
specified.
Let's say that we will now rename this variable to Cause Emitter.
So if we will do so, then our example will no longer work, because here in the template we are expecting
an output event named Core Selector and there is and here and emitter named like that.
So if we want to define here at the level of the output decorator a different name for the custom event
other than the name that we have here for the event emitter, we can use here the string parameter.
So if we now specify here a value, then this is going to be the name of the custom event linked to
this emitter.
So if we know retry our application, we are going to see that everything is still working as expected.
So if we head over here to the console and we hit here, for example, the second candidate with the
least, we are going to see that our custom event is still being triggered.
And with these, we have covered the angular component inputs and outputs.
What we're going to do next is we are going to start covering several of the core directive's of ANGULAR.
Let's start with the most commonly used end G4 and NGF.