In this lecture, we're going to learn how to listen for events in our templates at the moment.
The image will always remain the same.
I think it would be cool if we could dynamically swamp this image with another image.
Let's try giving it a shot.
Open the app component template in your editor.
Elements can emit various events.
Normally we would listen for an event by selecting the element with a query function.
Afterward, we would attach an event listener to the elements.
Angular provides an easier way to attach event listeners on elements.
Actually, I would even go as far to say it's better than vanilla JavaScript.
The syntax is easier to read and write.
All browser events are supported in angular.
We can handle clicks, form submissions, keyboard events, et cetera.
Custom events are supported, too.
We'll look at how to create custom events in a future lecture.
For now, we're going to focus on browser events above the image.
We're going to add an input element.
Through this element, we will allow users to change the image before we move forward.
Let's add some spacing.
Open the app stylesheet file.
We will select the input element.
They display property will be set to block.
The margin your property will be set to 10 zero.
That'll give us some good spacing.
Let's go back to the templates on the input element.
We are going to listen for an event called Key Up.
Events can be written like attributes on an element.
We need to wrap the event with a pair of parentheses.
If we omitted the parentheses, Angular would interpret this event as a regular attributes.
It's important to wrap the event with parentheses at this point.
You may have started to notice a pattern.
Each HTML template files are not regular HTML files.
Angular enhances templates with additional syntax for interacting with the documents.
This set of features are why developers love angular.
Our components, template and logic are separate at the same time.
They're not entirely decoupled from one another.
We can apply special syntax to our templates to bind properties and events without angular.
The browser wouldn't know how to handle this syntax back to the task at hand.
Normally, events are prefixed with the word on.
We can safely omit the on key word from the event name.
This applies to all browser events.
Angular automatically attaches this keyword to your event bindings.
The key up event will fire after a key has been released.
We can use this event to help us detect changes in the inputs.
The value of this event can be an expression we're going to instruct Angular to run a method.
We will run a method called change image with the event object passed in.
On the one hand, we could handle the logic in the template.
However, that's not recommended.
We should outsource complex logic into the class.
The template should listen to events afterward.
It can pass on event handling to our class.
Angular will provide us with an object called event in the template.
We can pass it on to our components methods.
Let's help the user by providing the initial URL to the image.
Try this as an exercise.
I want you to set the value attribute to the URL in the class.
Has the video and good luck.
Welcome back.
If you're able to tackle this problem, that's great.
If not, that's fine as well.
Let's tackle it together on the input element.
We're going to bind the value attribute to the image you are L property.
Be sure to wrap the value attribute with square brackets, otherwise angular will not be able to process
the expression in the attributes value.
There is a distinction between binding events and properties.
Property binding is performed with square brackets.
Event binding is performed with parentheses moving along.
Let's write the method for handling the event back in the component class.
We're going to define the method.
We're going to accept the event argument as E!
This argument should be annotated with the keyboard event type.
Where annotating the argument with the keyboard event object to help TypeScript understand the object.
If you were to look around, the keyword event type is not defined in our class.
Luckily, we don't have to define it.
Angular has configured TypeScript to include types for the DOM.
This includes types for browser events.
The keyboard event type can be annotated on objects that represent keyboard events.
Remember, we want type safety in our application.
We want to make sure we're receiving the correct type of object when calling this method.
The key up event will give us a keyboard event object inside this method.
We're going to set the image URL property to the event dot target dot value property.
After saving the file, we're going to receive an error in the console.
The error is telling us the value property does not exist on the event target object, which doesn't
make sense because we aren't using this object or so it seems.
In the following lecture, let's explore this issue in depth.