Angular 2 communication using Services

In this article we will discuss about communication using Services in Angular 2. This is very useful when you have more than one components which need to access and manipulate single source of data. This method is usually used in the following scenario:

 

  1. Service making API hit to server and share data across all the component inside the web app.
  2. Service that pull and push data across multiple component because of it’s singleton property (Single source of truth).

 

Above are just the very common use cases of this methods. There are other lot of situations where you will be going to make use of this Method of communication.

 

Example: Best example of Service is DataService  containing all API calls  which needs to be called from almost each and every dynamic components interacting with server.

 

In order to understand in terms of Angular 2 code, below is the example containing two components HomeComponent & AppComponent and a service name DataService :

 

 

As seen in above code, we have getSearchedLB method in DataService which make an API call to server and get some data. Now both our Components i.e HomeComponent & AppComponent are making use of that method by calling  “this._DataService.getSearchedLB”. So using this method you can insert any pull and push any data on that shared service.



 

We can also use this method to communicate between two Services. For example: Consider a Service name CommService”  which provide the communication bridge between all the components and services using  “Services emitting events using RxJS” method while other Service named “DataService” pull and push data from server. Now we can use this method even to build communication using Services.

 



Happy coding & learning Angular 2…. 🙂 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *