Using Http services for storing and fetching user info: Angular 2

a2Using Angular 2 Http get, post services is the most essential requirement when you are working on any Angular 2 app because anyhow you will have the scenario to store some user information from your end and you have to fetch some information from their end as well if you know what I mean.

So here in this blog, we are going to create an application in angular 2 which will use two services, one for getting the information from the .json file ( in this file we have an array of objects those represents color names) and list those color names on view with CSS color property, in another service we will hit post call where we send the user name and password to the API and if that is authenticated we get the token as response.

We are going to create two components: 1- List colors: this will be a get call for fetching all color names, 2- Log User: this will be the post call for posting username and password and we will get the token as a response, the app component will be the root component for our app that we will bootstrap.

Let’s code: create a trainingData.json file like:

list-color.service.ts

Let’s see the component implementation of getColorList service function:

You must be thinking about the post service for sending the user login info and get the reponseToken, let’s see it’s service first:

and it’s component calling:

Check out the source code for this example: KFD

Please share your opinions, thanks 🙂


Written by 

Rachel Jones is a Solutions Lead at Knoldus Inc. having more than 22 years of experience. Rachel likes to delve deeper into the field of AI(Artificial Intelligence) and deep learning. She loves challenges and motivating people, also loves to read novels by Dan Brown. Rachel has problem solving, management and leadership skills moreover, she is familiar with programming languages such as Java, Scala, C++ & Html.

2 thoughts on “Using Http services for storing and fetching user info: Angular 2

Leave a Reply

%d bloggers like this: