How to listen to events and emit data in Angular

Key takeaways:

• User interactions trigger events that allow data emission between components, which is essential for responsive applications.

• The @Output() decorator and EventEmitter facilitate child components to emit custom events that parent components can listen to.

• Create a child component with an event (e.g., customEvent) triggered by a user action (like a button click). Bind the child’s event in the parent component using (custom event) and define a method to handle the emitted data. This setup establishes clear communication between parent and child components, enhancing overall app functionality.

Events are actions or occurrences in the application, such as user interactions like clicks or keyboard inputs. When these events occur, we can emit data—sending information from one component to another, enabling them to respond dynamically.

Understanding how to listen to events and emit data in Angular is crucial for creating responsive and user-friendly applications. This allows us to build robust parent-child component relationships, enhancing the app’s functionality.

Achieve listening to events and emit data

In Angular, output bindings allow us to listen for events emitted by a child component and to emit data through custom events. This process is exemplified through a parent-child component interaction.

In this setup, the parent component contains a child component. The child component uses the @Output() decorator to create an instance of EventEmitter, which enables it to emit custom events. For example, when a button in the child component is clicked, it triggers the event emitter to send data back to the parent.

The parent component listens for this emitted event by binding to it in its template. When the event is detected, the parent updates its state based on the data received from the child, allowing for dynamic and responsive interactions.

We will go through the key steps required to achieve this task.

Step 1: Create a child component

Firstly, we will create the child component responsible for emitting the custom event. Here, let’s call it child.component.ts:

The line-by-line code explanation is given below:

• Line 3: This line imports the Component, Output, and EventEmitter symbols from the @angular/core module.

• Lines 5–9: Decorates the ChildComponent class with the @Component decorator, providing metadata about the component. It has two attributes:

  • selector: 'app-child': This specifies the HTML selector for this component. This selector can be used in parent components to include the child component.

  • template: This defines the inline HTML template for the component. In this case, a button with a click event triggers the emitCustomEvent method.

• Lines 11–15: Here, the ChildComponent class is defined in which an @Output event is declared, namely customEvent. This event indicates that this property can be bound to by the parent component using an output binding. Then, the emitCustomEvent method is called when the button on the rendered web page is clicked. Once the button is clicked, a custom event with the specified data (custom event data from the child component) is printed on the web page.

Step 2: Use the child component in the parent component

Next, we will use the child component created above in the parent component, namely app.component.ts, and bind to its custom event using the output binding syntax:

The line-by-line explanation of the code is given below:

• Line 3: This line imports the Component symbol from the @angular/core module.

• Lines 5–9: Inside the @Component decorator, the customEvent emitted by the ChildComponent is bound to the handleCustomEvent method using the (customEvent) syntax.

• Lines 12–16: The handleCustomEvent method then updates the eventData property with the received data, which is displayed in the template.

Step 3: Include components in the module

Finally, we make sure to include both the parent and child components in our Angular modules:

When you run your Angular application, clicking the button in the child component triggers the custom event, and the parent component receives and displays the emitted data.

The complete codes explained above can be tested with the Angular project below. Run it to see it in action!

Conclusion

To conclude, Angular's output binding and custom events mechanism provide a powerful and flexible means for communication between parent and child components. By utilizing the @Output decorator and EventEmitter, components can establish a unidirectional flow of data, allowing child components to emit custom events that can be listened to and handled by their parent components.