Angular: Emit Event Through Router Outlet

Introduction

Angular is one of the most popular front end framework for building websites and follows the MVC pattern. Angular provides a simple way for parent-child interaction by passing input from parent to child or emitting output from child to parent. However when a child component is rendered via router outlet, the child component is not on the template of the parent component so communication has to happen via alternate means. This articles looks at various ways to trigger events from child components rendered via router outlet.

Approach

We cannot pass the events directly through a router outlet. However, router outlet has some events like activate which triggers when a route is activated and deactivate which triggers when a route is about to be deactivated. We could leverage these events to facilitate component interaction. This article discusses three approaches to achieve this. It uses an example of a parent and a child component rendered through router outlet. The parent has a counter which is incremented anytime the child component emits an event to it. The 3 approaches used are listed below:

• Subscribe to child Event Emitter on route activate
• Pass event handler function to child on route activate
• Use a shared service ( could be used for any two components not necessarily parent and child )

Subscribe to Child Event Emitter

Event Emitter is also an observable so we could subscribe to the event emitter in the child component from the parent component. When the route is activated, router outlet emits the activate event with a reference to the child component. Hence, from the parent component, we could subscribe to the child’s event emitter and the event handler function passed in the subscription would be executed whenever the the child emits the event. Sample code for parent and child class is shown below.

Pass Event Handler Function to Child

This is very similar to the first method. Here we create the event handler function in the parent component. When the route is activated for the specific child component, we set a variable in the child component to the function in the parent component we want to call. It is recommended to use an anonymous function so that the reference to the parent component with keyword this is maintained when the function is called in the child component. Sample code is shown below:

Using a shared service

This approach could be used for not just parent child components via router outlet but for any two components. Angular provides dependency injection for service so there would be only one instance of the a service across all components. Hence we could store an observable in the service. The parent component can then subscribe to the observable while the child component can trigger the next operation of the observable. The sample code is shown below:

Summary

We have discussed 3 approaches for emitting an event through a router outlet: Subscribing to the event emitter of the child component, passing parent function to the child component, and using a shared service. Entire source code could be viewed here.

I really hope you found this helpful. Please give a 👏 if you enjoyed it.