0

Inter-component communication using EventEmitter in Angular

This post demonstrates how to send messages from different components to the AppComponent using EventEmitter.  We have 3 components – AppComponent , AnotherComponent , and YetAnotherComponent . We also have a service that holds an instance of EventEmitter.

The Codes

Service

We have a single service that is used by all the components.

Our  app.module.ts

Components

AppComponent

For AppComponent , we set the default message and a way for it to also set the message to its original value.

AnotherComponent

In this component, we have the onClick function to send a different message to AppComponent.

YetAnotherComponent

Another component that sends another message to AppComponent .

Testing

We are using Angular 8.

Karl San Gabriel

Karl San Gabriel

Java and Enterprise Technologies Expert