Angular-Introduction to Data Binding: Event Binding.

And I'm Farish Kashefinejad. And in this video, I will discuss angular event binding. Now, event binding in its most simplest form is one-way data binding, but it also serves as the foundation for two-way data binding as you create complex interactions with your users. To begin, on the left is the Cloud Academy Lab environment with an Angular application app component template, file open, and on the right is the Angular development server running in the browser. For the first part of this video, I will create a button and bind an event to it. So, in the template, I will create a button and use it to discuss what needs to be done. Now, binding an event requires two items. First, the event being listened for and second, the class component property tied to the event that will trigger when the event happens. I will give this button a text of 'click me' and then I will have the button listen for the click event. When the button is clicked, it will trigger a class function name 'message'.

Now, the message function does not exist so I will create it inside of the app component file. Now, inside of the app component class, I will type 'message' and this is a function and this function will execute an alert and this alert will display the text 'Hello there'. This completes the event binding. And to the right, I will click on 'click me' and there is an alert. Now, this completes the button and its associated binding. Next, I will create an input back to the template file. I will start by creating a paragraph and for now, the paragraph will have the text content of input value. After the paragraph, I will create the input and the way this event will work is when the enter key is pressed and then subsequently released, it will take the value of the input and display it as text on the page. So, the event that the input needs to listen for is the 'keyup.enter' event and this will be bound to a function called handle input, that does not exist yet. Pausing for a moment, I need to pass in the event object as a argument for this function. Angular represents this object with a special variables event.

Once this completes the setup of the event binding to the input, I now need to go back to the app component file to create the handle input function. Now, inside of the app component class, I'm taking this approach for demonstration purposes. I'm going to create a value called inputvalue and I'm going to set this equal to an empty string and the plan is to use string interpolation to display the value of input value inside of the template. Now, I will create a class function called handleInput and handleInput will take event as an argument. Inside of the function, I will set this.inputValue=event.target.value. So, now this function is complete. What will happen is when I type something inside of the input and hit Enter, when I release the Enter key, the value of the input form will be saved to this input value. Now, there's this error on the right side parameter event implicitly has in any type.

As a reminder, Angular uses TypeScript and this is a TypeScript error for now. To satisfy this error, I will add the 'any' type to the event parameter. I will circle back to this a little later in the video and now, the error is gone. I will return back to the template. As I mentioned earlier, I want to display the value of the form on this page. So, inside of the paragraph to the right of input value, I will type double curly braces Input Value. Now, this completes the form. Inside of the input, I will type my name and hit Enter and there is my name on the page. So, this works, but I'm going to circle back to the app component and make an adjustment to the handle input function. Now, looking at this function, I use the 'any' type for the argument as a shortcut to get this function operational. I'm going to switch the 'any' type to 'event' and now, there's a new error: event.target is possibly null. I will address that shortly. Now, this function will return a string. What string? The string that's being interpolated on the page where my name had appeared earlier. So, I will type it as such. And this new error simply occurs because I do not have a return statement, so I will add return before this dot input value.

So, the error event.target is possibly null has returned. What I need to do to resolve this error is to cast the event.target as HTML input element and the error is now gone. So, why do I have to take this approach with event.target? That is because TypeScript by default will type the event dot target as the event target interface and that interface does not have access to the value method. By typecasting this as the HTML input element, I can access the value of that input. Now this is done and I will type my name inside of the input again and hit Enter and there my name appears. So, it works. Thanks for watching.

Angular - Introduction to Data Binding: Event Binding

About

Learning Objectives

Intended Audience

Prerequisites