Angular Cross Component Communication

Mehmet Cüneyt Dalan
Oct 10 · 2 min read

“Previously on Lost”

It is very common need to interact with the other component while developing any kind of frameworks or libraries. In angular there are ways to do it.

You can use property binding to communicate between parent and child components.

You generally use Input and Output decorators communication between parent and child components but if its about interaction between cross components that would be enough tough to use property binding usage. It is great way to use injectable services to transmit the data between cross components.

Services make codes leaner, easier to maintain it is not necessary to build with these complex input and output things where you passed the events and properties to communicate between components.

I’ve made a simple example which includes two components under app component. First component takes the input from user and the other one lists it via injected service. Here is my service file of a-component.

Emitting Lost TV Series characters array in my service file.

In my a-component file added two default character and user adds over it. When page rendered first i wanna see the default characters so i also emit the characters array in ngOnInit() method.

Here is my form to get user input.

When clicked on emits the user input in a.service file then to get data from b-component it needed to be subscribed with importing the a-component’s service.

So data which is transmitted from a-component ready to be used in the b-component. Simple :)

I don’t remember the job of her :)

5bayt

Mühendislik, yazılım, teknoloji…

Mehmet Cüneyt Dalan

Written by

Sofware Developer

5bayt

5bayt

Mühendislik, yazılım, teknoloji…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade