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