Event Binding with Angular 2 and TypeScript

[00:00] Today, we're going to go over event binding with Angular 2. First of all, the setup that I have here for my Angular 2 app is directly from the angular.io website, so if you want to mimic my environment, my code and so forth, you can do so by going to angular.io and clicking the Learn in Five Minutes button. Also, I just want to mention that all of the code that you're seeing here today is written in TypeScript.

[00:22] To get started with event binding in Angular 2, it's important to know what events we're binding to. These are events that are produced by the DOM, and they natively exist within the DOM. We are not creating these events. We're simply listening for them.

[00:35] There's all sorts of things that register events in the DOM, such as mouse actions, keyboard actions, form actions, et cetera. It's going to be important when using Angular 2 that you familiarize yourself with the different types of events so that you know what's available to you.

[00:50] We'll get started with a simple example. Taking the template that is already provided to us in the Angular 2 demo, we're going to go ahead and just add a click event. The way that we do this is we type the event that we want to listen to and surround it with parentheses. This is special Angular 2 syntax.

[01:06] Next, we specify what we want to happen when that event occurs, and we are going to call a "Do Something method" that will specify in our component. To do this, we just create a new method, "Do Something," and we'll go ahead and just create an alert that will pop up when the event is triggered. To see that work, we can go ahead and move over to our application, click "Hello, Alice," and we'll see that our alert pops up.

[01:26] Now, it's important to keep in mind that we don't have to use this parentheses syntax. Angular 2 does provide to us the standard directive syntax that we're used to in Angular 1.X, so we can go ahead and write on-click, and we'll save this, refresh the page, and we'll see that our alert will still pop up because the event is still registered.

[01:44] Let's go ahead and write out a common use case for listening to events with Angular 2. To do that, we're just going to create an input, and we're going to listen for the key up event which will fire every time a key press is released with inside the input.

[01:56] For our method inside that event, we're going to go ahead and call event. Again, this is just the native JavaScript event, nothing special that we're creating here. We will drill into the target of that event, and then the value of that target, and we're going to go ahead and set a name equal to that.

[02:10] What that's going to do when we refresh the page and begin to type into the input is every time we release a key, name, which is being displayed in our H1 tag via an Angular 2 expression, will then be updated to the value of that input. We can see here that the effect of this is similar to the two-way binding that we're used to of Angular 1.X.

[02:31] These are the basics of event binding in Angular 2, and as you can imagine, there are many different possibilities of what you can do with this. A few other common ones would be to take advantage of the blur event on an input field for something like form validation, or listening for a click event which would take place of our Angular 1.X directive of ngClick.