Angular, Software Development

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.

Got comments or suggestions? We disabled the comments on this site to fight off spammers, but you can still contact us via our Facebook page!.


You Might Also Like