Name: Angular 2 - Custom Events (es5)
Uploaded: 2015-05-15T20:31:17-05:00
Description: Angular 2 components can emit custom events through the new EventEmitter. John walks through the process of setting up a custom event and how to interact between the parent and child components.

Angular 2 components can emit custom events through the new EventEmitter. John walks through the process of setting up a custom event and how to interact between the parent and child components.

https://app.egghead.io/api/v1/lessons/angular-2-angular-2-custom-events-es5/subtitles

Angular 2 - Custom Events (es5)

[00:00] When you have a component nested inside of another component like this "Clicker" which I'm using inside of my app, you might think you could simply just add a "Handler" like click on here, and then you could just simply handle that inside of your app. "Onclick," and then we'll try and log out the event.

[00:23] Once I start clicking on this button, nothing's going to happen. Even though it looks like the syntax is all right, we got the parens around the click, we have our onclick named method here, we've an onclick here, but nothing's happening.

[00:36] This is because to capture an event that is bubbling up from a subcomponent, you need to add the caret in front saying "Look up for that event." I'll just hit "Save." Now, this is working just fine.

[00:49] This little guy here is only necessary if an event is coming from a child component, which needs to come up to a parent component. If you want to get more creative with custom event, I'll go ahead and delete this. I'll add an update event.

[01:03] That means I need to define somewhere my clicker and update event. What that looks like is in your code inside of the component, you define an events array. It's an array of strings for the events. This one is going to be called "Update."

[01:21] On the clicker, we say "This update is a new Angular.event emitter." To trigger this event emitter, we're going to have an update on each click. Let's go ahead and handle a click. We'll "Handle the click." Switch back over to our app and this onclick. Here, we can trigger update by saying "Next." Next actually refers to observables and calling the next tick on that observable which we'll cover more in other lessons.

[02:04] This means that update is now being fired and that on my app, I can now say "Event on update." I'll just log out updated. If everything's hooked up property, we're listening for update from my clicker. I'm clicking handling in onclick, and onclick is triggering update next. When I click on this button, I should get updated because update is being handled here.

[02:35] Now, to have a bit more fun with this, let's keep track of a clicker value, so say "A clicker value." We'll start it at zero. Whenever clicker value or the clicker itself updates, we'll assign to event.value.

[02:54] To get an event from here, we need to pass along an object inside of next where we give the value some sort of value. This value we're going to give it can be this.value which will start at zero, and will just past along here.

[03:15] We're also going to want this.value to increment each timely click on it. Then finally, let's display the clicker value just to make it a visual thing inside of my app where I can just say "Clicker value." I hit "Save."

[03:31] I'll start clicking and you'll see that it's updating. The process is that the clicker is handling a click event. That click event is triggering our update from our event emitter. It's calling next with an object with a value. That value is being updated and then handled in the OnUpdate, which again is handled here and then passed through.

[03:59] One last thing I'll do to make this just a bit more feature-rich is I'll just make it so that on mouseout. So, "Mouseout," switch back over to my clicker, scroll up and say "Event on mouseout." We'll do this.value is zero, meaning we'll reset the value whenever we mouseout.

[04:22] We'll say "This update next" and pass in a value of this.value. Now, whenever I click this button, it will start counting up. As soon as I mouseout, it resets to zero. Click, click, click, mouseout resets to zero.

[04:40] I didn't have to change anything in my app, I'm just handling the update. I'm just adding some additional features to how we can dispatch that event, or trigger the next tick in that event based on however we want to handle it on the inside.

Angular 2 - Custom Events (es5)

Share this video with your friends