4.4 Event Bindings

Hi folks, in this lesson, we're going to see how we can add event bindings for things like clicks on elements. As well as complete our understanding on output properties. In the example application at the moment, we have the start component visible and the game and end components hidden. However, the start button is currently disabled, so let's just change that so that it is enabled. And we don't need this test method, let's just get rid of that quickly. So we're probably going to want to add a click handler to the button so that we can perform an action like starting the game. The start button is in the start component. So let's add a binding for the click event of the button and the template first of all. The syntax for an event binding is to enclose the name of the event that we want to bind to within parenthesis. The method of the component that we want to invoke when the event occurs, the template statement, is specified on the right hand part of the expression after the equals sign. Now let's add the start game method to the component. So let's go back to the browser now and let's just open now the console. And lets just clear that. There's a couple of things in there I already, there's the player from when we created the models earlier on in the course. And this just is generic, development mode, log which we get from Angular. So let's just get rid of those and now let's click this start button. So the page reloaded, and the reason why it did that is because we've got a button inside a form. And the default action that the browser will take is to treat that button like a submit button. So let's just preserve the log in here, and then go back to the console, let's clear that again. And let's hit the start button one more time. So this time we did see the message briefly. It didn't seem to want to preserve that, nevermind. But we did see that briefly there. So we know that the handler is working and the event binding is working in the way that you expect. So, we're not quite there yet. In this case however, we want to stop the page reloading for one thing. So, let's go back to the template. The way that we would do that traditionally is to code the event preventdefault method. And to do that we'll need the event object. So we can pass the event object using a special token in the expression in the templates here. So this tells Angular that we want to pass through the event object. So now let's go back to the class and the method will know receive that event object. So let's have a parameter for it and we can then call the preventdefault method on it. And let's go back to the browser again. And now the page doesn't reload. Like property or attribute bindings, event bindings represent a one way flow of data. But with an event binding, data flows out of the UI and back into the component class with property and attribute bindings. The data flows in the opposite direction, but all three of these bindings represent one way flows of data. So now, let's say to everyone to hide the stock component and show the game component when the stop button is clicked. The stop button is inside the stock component. But the logic to show and hide the various components is in the home component. As well as binding to regular events like clicks and key presses and the like, we can also bind to custom events which makes it easy for child components to communicate with their parents components. So what we need is for the start components to emit a start game event when the button's clicked. So we've already got the output and event emitter tokens imported into this class. So now we need to define the events that will be emitted. We do this using the output decorator and we decorate a property of the class. So, as an example earlier in the course, we added this outgoing data property. Let's just change that to be a proxy called start. And now inside the start game method, instead of logging to the console, we can emit a start event. So back in the home components template, we can add an event binding for this custom start event. So this time, the event that we're binding too is called Start and we're going to invoke another method called startgame. But this one will be in the home components. So inside the startgame method in the home component we can set the hide start property to true and the hide game property to false. So now let's go back to the browser and we should find that when we click the Start button, we see the game component, awesome. So we can also pass data out without our custom event. And at the moment, we're saying that the event is going to emit a string, let's just change that. And now when we omit the custom event, we can pass an object and it will get omitted with the custom event. So now we need to do two things. We need to update the event binding in the home components and we want to pass through the event object. And we should now have to receive that in the ven handler in the home component. So let's check it out in the browser. And we can see that our custom event object is logged to the console. And it just contains the property that we set. It doesn't contain all of the other events though. So we don't actually need to do that, let's get rid of that for now In fact, in this case we don't need to emit any type of value, so let's get rid of that any type. So in this lesson, we saw how we combined to both regular DOM events, as well as custom events, using Angular event bindings. We saw that the syntax for event bindings is to wrap the name of the event that we want to bind to in parenthesis. Followed by the name of the method that we want to use to handle the event. We also saw that if we want to a component to meets custom events, we just need to define the name of the event using the Output decorator. And that the event should be in instance of the EventEmitter class. We can then emit the event at the appropriate times and handle this in any ancestor components. Thanks for watching.