Use angular service to store data for components.

Communicate data from one angular component to any number of consecutive or next components without parent-child relationship.

Angular service helps components by saving data for them.

Angular service as its name suggests is something that serves components.

Note: I will use angular service to store data from one component and then use it in the next component/screen.

Property value saved in angular service can be used like global data application-wide by any number of other components/screens in the application.

Let me illustrate above using a simple demo.

Suppose I have a hotel booking website with below screens:

• Select hotel screen to display a list of hotels available and allows the user to select a hotel for booking.
• Select Room screen displays rooms available depending on hotel selected from select hotel screen above.
• Hotel Service class to save selected hotel details from select hotel screen and provide it to select rooms screen.

The Problem:

How will select room component or any other component in our application know, which hotel user selected from select hotel screen?

The Solution:

Hotel service serves as a storage to save hotel details from select hotel screen. Select Room component can then call hotel service to get those details and display rooms available accordingly.

I created below components, HTML, and service:

• Select Hotel component
• Select Hotel Html
• Select Room component
• Select Room Html.
• Hotel Service.

You can follow the below steps to create your angular project and service, in case you are a beginner in Angular:

Setting up an Angular project.

Angular Service link.

I have run below angular CLI commands to generate required files, using Integrated Terminal in Visual Studio Code:

1. Create Service:

Create new service using terminal window of VS Code.

2. Create components:

Steps of Implementation:

1. Add a property in Hotel service class to store the selected hotel details:

2. In Select hotel component, import hotel service class at the top and then inject it in the constructor:

Note: Angular has built-in dependency injection system to handle the dependencies. Please refer to Angular Dependency Injection for more details (explaining it here is beyond scope of this article).

3. Now set the value of service property “selectedHotel” from Select Hotel component.

• I have hardcoded value of selectedHotel; however, in your application, the property will be set from UI (user selects the hotel from select hotel screen).
• The user navigates to Select Room screen using goToNext() method, bound to click event of next button on Select Hotel screen.

4. In the Select Room component, call Hotel service to access selected hotel details:

• Select Room component has its own property “userSelectedHotel”.
• “userSelectedHotel” is set to property value saved in hotel service.

5. Let me show the value of properties at runtime, from browser debugger :

Value of Hotel service property at runtime.

Value of “userSelectedHotel” property is set at runtime.

Please find here the GitHub link of the project source code:

arshdeepSidhuDhindsa/ArticleDemo

I have been using Angular on the front end for quite a while now. Angular service is widely used to store any kind of data, below are 2 most used ways:

• Save user selection from one screen and then use it across other screens.
• Save API result from one component and reuse it across other components to prevent duplicate API hits.

Thank you for your time. I hope this article helped you. Happy learning!!

https://www.cssoftsolutions.com/