Get Started with Angular
Pass Events from Angular 2 Components with @Output
Components push out events using a combination of an @Output and an EventEmitter. This allows a clean separation between reusable Components and application logic. This lesson shows how to use @Output to create an update event and then listen for the event in your application.
[00:00] Now that we can update this value inside of our component, let's make it so we can push that updated change out of our component. We can do this with what's called an output. I'll make sure to input this. I'm going to call this output Update. This is an event emitter. Make sure you import this from Angular Core. You'll notice that all of our imports are basically coming from Angular Core right now.
[00:27] We can make it so that this update is what's triggered when we click. I can say instead of on click, I can just update, emit an object. I'll just say the text of the object is the current message. I'll go ahead and delete this on click. We're not using this anymore. I'm going to delete this message up here as well because we don't need to output it.
[00:53] To show this working, that this update will work, I need to go into the app component and re-display this list of messages here. List elements with an ngFor, let message of mail.messages. Display the message. What we're going to try and do is when I change the value in here and delete something, and I click the bottom, it should update this as well if that service is updated.
[01:23] To do that we now have an event coming off of our component called Update. This is just like the click and mouse over we used before. It's just that we defined one for ourselves. I'm going to say on update and take the event and just log this out to show it's happening. On update, console log. Event, event. You'll see that this event that's coming through...If I delete this and click the button, you'll see the event coming through as an object with the property of text with a value of your on it.
[01:59] To save this in our mail service, I'm going to have to give these some IDs. Let's go ahead and give these IDs. This will just be a way to look them up. The values of these messages will just be text. Make sure that curly is in the right spot. Make this one ID1 and ID2. Our messages are now just objects with IDs and text. To display them properly, this needs to be message.text and pass in message.text.
[02:29] With this change, we're back to the same place we were. It's just that now in on update I can say message.ID because this is keeping track of the message I want to update and event.text. In on update, I can say ID text. Then on my mail service, which we've injected here, I can say this.mail.update ID text and implement that in my mail service.
[02:59] We'll implement this update in our class by passing in the ID and the text. We'll say that the messages are the messages and we'll remap them so that as we loop through each message, we can check if the message ID is the same as the ID we passed in. If it is, then we want to return an object with the ID we passed in and the text we passed in. Otherwise, we want to return the message that we're looping through. We're either going to return an object with this and that, or we'll return the original object.
[03:37] Now when I hit save and I come in here, delete this, and click the button, you'll see that this updates as well. On any of these I can make changes, click, and the changes will be saved to the service.