Angular Tutorial - 9 - Event Binding

all right so far we had a look at data binding where the data flow was from the component class to the component template any update to the class property the view gets updated as well but sometimes to respond to user events such as most clicks or keyboard events we need the data flow in the other direction as well that is from the template to the class so to capture events we make use of event binding let's understand with an example I'm going to go back to visual studio code and in the template let's say we have a button with the text greet when the user clicks on this button we want to display welcome to code evolution so we need to listen to the click event on this button and here is the syntax within the opening tag of the element start with a Dom event you want to listen to in our example we want to listen to the click event then enclose this event within parentheses to this assign the corresponding event handler and this is nothing but a method in the component class let's assign an event handler on click and then define it in the class so over here I'm going to type on click and in this method we are just going to log to the console welcome to code evolution so now if we save this and head over to the browser and open the console and click on the grid button you can see welcome to code evolution so we are binding to the click event and displaying welcome to code evolution now it is also possible to set properties on the mouse click let me show you how let's go back to visual studio code and I'm going to add a new property I'm going to call this public greeting and initially I'm going to set this to empty string and then on the button click we set this property value this dot greeting is equal to welcome to code evolution and then in our template so right next to the button we can use interpolation and bind to the reading property now if you save this and go back to the browser you can see initially greeting is an empty string so nothing is displayed but on button click we said greeting to welcome to code evolution and this gets displayed in the view because of interpolation so we are binding to the click event and then setting the value of a property in the component class now sometimes we might also want information about the event itself for example information about the click event for that you simply send in a parameter in the event handler and this parameter is dollar event and this is a special variable for angular the dollar event gives you all the information about the Dom event that was raised so now that we are passing a parameter to the onclick method let's also add this over here in our method definition let's call this event and instead of logging welcome to code evolution let's log the event now let's go back to the browser and if you take a look at the console after I click the grid button it says it is a mouse event so click is a mouse event and if I expand this you can see all the information about the event that was captured the x and y-coordinates the target the type of the event for example click event and so on and you can use any of these in your application for example I can set the greeting to be event dot type and when we save this go back to the browser once it reloads I click on greet and you can see that it is a click event so by using dollar event you can get access to all the properties of the Dom event all right finally sometimes when you work with event binding a separate event handler may not be necessary for instance in our example right now the method body is very small so you can have this as a template statement right in the HTML itself so let me add a new button but this time instead of assigning an event handler I'm going to add a template statement greeting is equal to welcome vishwas so now if we save this and go back to the browser and I click on the second green button it says welcome vishwas we did not assign a handler to the click event instead we have typed the code to be executed right in the HTML element and it works just fine well that is about event binding even binding lets us capture any Dom event and perform some action all right thank you guys for watching don't forget to subscribe and I'll see you guys in the next video

Channel: Codevolution

Views: 350,308

Rating: 4.9466481 out of 5

Keywords: Angular, Angular Tutorial for Beginners, Angular Event Binding, Angular 5 Tutorial, Angular 6, Angular 6 Tutorial

Id: ZfIc1_oj7uM

Length: 5min 18sec (318 seconds)

Published: Mon Dec 04 2017