Angular Cross Component Communication

“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 :)