Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Angular 2 - Events (es5)

3:38 Angular 2 lesson by

Angular 2 introduces a new event syntax for connecting events on the DOM to your controllers. In this video, John walks you through the basics of the new syntax and how to handle events inside your own components.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Angular 2 introduces a new event syntax for connecting events on the DOM to your controllers. In this video, John walks you through the basics of the new syntax and how to handle events inside your own components.

Avatar
David

Great tutorial John, thank you for my ongoing AngularJS education. I've been following you since 2013. I have a "Proof of concept" application I am working on in which I'm combining both AngularJS 1.4 and AngularJS 2.0. For my AngularJS 2 I'm using version ^2.0.0-alpha.25 and I'm missing the two way data binding that you have in this tutorial. In my Clicker functions "onClick" and "onMouseMove", the clickCounter, and the x, and y are being updated, but the updates are not displaying in {{clickCounter}}, {{x}, and {{y}}. They remain at 0 as initialized. How did you accomplish the data binding?

Thank you very much!

In reply to egghead.io

You need to get into the habit of creating an application-level component in your index file, and then creating subcomponents inside of it with never touching your index file again. What's going to really help with that is setting up some templates like this, so an "App," which I can then "Bootstrap."

Once I hit "Save," you'll see "I'm missing my template," so I couldn't load my app.html from my template URL. So app.html, and then a simple template inside of here saying something like app. Hit "Save," and we have our app.

Now I'll build some subcomponents inside of there to handle the events, and don't worry, I do include these snippets for sublime in the JS Bin below. So my subcomponent is going to be called "Clicker." To use my subcomponent, I need to add it to "My view" as a directive in my main application. We'll call it "Clicker."

Once I hit "Save," come over and "Add my clicker," we should get that missing template error again. Now we'll create a new template for my clicker. Clicker.html, which can just be a div, and for right now just a button saying, "Click me." All right, so now we have our application, which is all of this, and then our clicker, which is just this button inside of our application.

To handle events on this button we're going to use the syntax of wrapping the event name inside of these parens. Open paren, click, close paren. Then assigning that or setting it equal to something that's on our controller which we'll call "On click." Come back over here and add this.on click is a function called "On click," so that when I click it it just says, "Hi." Come over here, click the button, and we get our, "Hi," message.

To show this updating something in the DOM let's go ahead and create a "Click counter." Just start that at zero so that every time we click, we'll just increment the value. Come over to our clicker template, and instead of "Click me" we'll just show the "Click counter." Now every time I click this goes up by one.

Any event that's available can be wrapped inside of these parens. For example, if I take mouse move and then give that an on mouse move, I can just put a this on mouse move is a function of on mouse move.

Then let's just get the x,y coordinates of the event by, just like in Angular 1, you just pass in event with a dollar sign in front of it. This will go ahead and give us the event where we can say this.x=event.x, and this.y=event.y. We'll just also go ahead and start both of these at zero, because I just like to initialize them that way.

Then to show off this.y and this.x, we can just go into our template and beneath this line just have a x,y, hit "Save," and as we roll over this button you can see the x and y coordinates update, and when we click it you can see it increments.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?