Angular 2 - Events (es5)

[00:00] 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."

[00:20] 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.

[00:39] 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."

[01:06] 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.

[01:32] 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.

[02:04] 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.

[02:32] 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.

[02:52] 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.

[03:18] 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.