Emitting custom events with @Output in Angular

We explain the communication of changes from children to parents through custom events, generated with @Output properties.

In the last article we met the , which allowed data to be communicated from the parent component to the child component.

We also commented that there is the possibility of implementing the other direction in the communication between components: from the children to the parents. This is done by issuing a custom event, but we didn’t get to explain how it was implemented.

So we are going to get to work to know the @Output properties, which will allow us to emit those personalized events, with which to notify parents of any situation that occurs in their children and that they should know about.

To clarify the ideas, we summarize the work scheme of communication from children to parents, in which two components are involved:

• The child component will be in charge of escalating the event to the parent, to notify it of an event. By notifying him, the son will be able to communicate a piece of information that the father should know, logically related to that event.
• The parent component will be able to catch the custom event emitted by the child and retrieve the data that was sent.

Implement the custom event in the child component

Our work in communication from children to parents begins in the child component. The work process is not trivial and its realization involves the use of several actors. To explain it, we will begin by presenting the parties involved in the process.

EventEmitter class

The Angular class that implements objects capable of emitting an event is called “EventEmitter”. It belongs to the “core” of Angular, so we need to make sure to import it properly.

import { Component, OnInit, EventEmitter } from ‘@angular/core’;

In order to emit custom events we will need to create a property in the component, where to instantiate an object of this class (new EventEmitter). Only this process has a detail that can complicate it a bit, at least at first, since it makes use of the “generics” of TypeScript.

Basically, the generic is used to tell TypeScript the type of the data that our custom event will escalate to the parent in its communication. This is the code that we could use to create our event emitter property, making use of the generics.

propagate = new EventEmitter();

So we are telling you that our event emitter will be able to emit data of the “string” type. Obviously, this type of data will depend on the component and may not only be a primitive type, but also a class or an interface.

Note: If you don’t understand this part very much, we recommend you read this article with more information about the .

The name of the property, “propagate” in this case, is important, because when capturing the event in the parent we will have to use it as is.

Decorator @Output

The “EventEmitter” type property, necessary to emit the custom event, must be decorated with @Output. This tells the framework that there is going to be a communication path from the child to the parent.

To use that decorator we have to import it too. Like EventEmitter, the “Output” decorator function declaration is inside “@angular/core”. Our import will therefore remain like this.

import { Component, OnInit, Output, EventEmitter } from ‘@angular/core’;

To use the decorator we will place the call with the empty parentheses, which will be sufficient in most cases. The code for the property declaration, using the corresponding @Output() decorator, is as follows:

@Output() propagate = new EventEmitter();

emit() method

When we want to fire the custom event we will call the emit() method of the EventEmitter object.

This method receives as a parameter the data that we want to send to the parent. Logically, the type of the data that we send to the parent must agree with the one that we have declared in the generic when instantiating the EventEmitter object.

this.propagar.emit(‘This data will travel to the parent’);

Example of a component that sends events to the parent

With what we know now we are able to deal with our first example of a component with @Output properties.

We are going to make a simple component that has a text field and a button. Clicking the button will emit an event to the parent, passing the string typed in the text field.

I’ll start by showing the component template, which is the part that will help us understand the behavior of the component.

Propagate

As you can see, we have the text field, whose typed text is bound to the “message” property.

Then we have a button that, when clicked, will execute the “onPropagar()” method.

Component TypeScript code

Next we find the TypeScript code of the component in question. We are going to see it all at once and then we will explain some details, although with the concepts already covered above it should be more or less clear.

import { Component, OnInit, Output, EventEmitter } from ‘@angular/core’; @Component({ selector: ‘dw-propagator’, templateUrl: ‘./propagator.component.html’, styleUrls: }) export class PropagatorComponent implements OnInit { message: string; @Output() propagate = new EventEmitter(); constructor() { } ngOnInit() { } onPropagate() { this.propagate.emit(this.message); } }

You should pay attention to the following points.

• We import “Output” and “EventEmitter”.
• We create the property “message”, of type string. This property contains the text that we are going to send to the parent when the custom event is fired.
• We create the property “spread”. This is the most important of the present example, since it is the emitter of the event. Notice that we use the @Output decorator and that it is declared as an object of the “EventEmitter” class. We are also indicating in the TypeScript generic that the data type that will scale to the parent is a string.
• We have the onPropagar() method, which is called when the button is clicked. This method is responsible for emitting the custom event, with this.propagar.emit(), which will travel to the parent. In the emission of this event, the data sent by parameter to emit() will be delivered to the parent, which is the value of the property, of type string, called “message”.

With this we have finished our work with the child component. Now we have to use that component and receive the events.

Receive custom events in the parent component

Now we are going to focus on the parent component. It is the one that will receive the events emitted by the child. It is a fairly simple operation, since custom events are received in the same way as events generated by the browser.

When using the child component we must specify the corresponding event handler in the parent template. The name of the custom event will be the same as the name of the event emitter property on the child that was previously defined.

As you may recall, event handlers are declared with the event name in parentheses. As we said, the name of the event corresponds to the name of the property in the child component.

The event handler is indicated between the double quotes. That “processPropagate” handler is a method on the parent component. It is interesting here the use of the “$event” parameter, which contains the data that is traveling from the child to the parent.

Now we can see the “procesaPagar” code, which will perform the necessary actions to process the event.

processPropagate(message) { console.log(message); }

In our case, we are only displaying in the console the “message” data that contains the string sent from the child to the parent.

That is all! we have completed the process of communicating from children to parents, done by issuing custom events in Angular. Perhaps it may seem a bit complicated at first, but by dint of repetition you will find it quite elementary.