Angular Tutorial - 21 - Fetch Data Using HTTP

Sharing buttons:

alright guys in the last video we

discussed the four steps to fetch data

using HTTP in this video let's implement

them the first step is to make a get

request from the employee service now in

angular 5 we see a change in the module

responsible for HTTP till angular

version 4 we were using the HTTP module

but from version 5 we use the HTTP

client module the HTTP client module

provides a simplified api for HTTP

functionality for use with angular

applications let's go ahead and import

it into our application so go back to

visual studio code in the app module we

are going to have import HTTP client

module from angular / comment / HTTP and

add it to the imports array so that the

HTTP client module is accessible within

the app module

now what importing the HTTP client

module we are also registering the HTTP

service with English injector we don't

have to explicitly register it by adding

it to the providers metadata the HTTP

client module will do that for us and

now to use HTTP in our employee service

class we declare it as a dependency in

the constructor so in the employee

service class in the constructor type

private HTTP of type HTTP client and

make sure to import HTTP client as well

so we now have a local variable HTTP

which we can use to refer to an instance

of HTTP client so we are ready to make a

get request to fetch data using HTTP so

in the get employees method let's make

the request return this dot HTTP dot get

the get request takes in a URL as its

argument now because we don't have an


working webserver and it doesn't seem

practical to start a web server to serve

up four lines of employee data for our

example let's fetch the data from a file

which we assume to be on a web server so

within the project folder in the source

folder within the assets folder have

created a new folder called data and

within the data folder have created an

employee's dot JSON file that contains

our employee data we will serve the data

from this file instead of an actual web

server so back in our employee service

I'm going to create a new property

private underscore URL of type string

which points to assets data employees

dot JSON and in the get request let's

use this URL this dot underscore URL in

future if you do have a working web

server you can just replace this URL to

point to that web server the application

will still work as expected so our first

step is now complete we have made a get

request from the employee service the

next step is to cast the observable

which we receive as response to an

employee array now if you hover over the

get method you can see that it returns

and observable but for our application

this observable needs to be cast into a

format that represents an array of

employees so for that let's first create

an employee interface in the app folder

create a new file employee dot TS and

then add the code for an employee

interface so export interface I employee

now each employee has an ID a name and

an age perfect we now have an employee

type that the observable can be cast

into so let's go back to employee

service I'm gonna add a type to the get


this is going to be an array of I

employee and also make sure to import I

employee and the get employees method

will return an observable of type

employee array and make sure to import

observable from rxjs as well so that

completes our second step we have cast

the observable into an employee array

the third step is to subscribe to the

observable from the employee list and

employee detail component and the fourth

step is to assign the employee array to

a local variable so let's implement both

these steps together go back to visual

studio code and go to employee list

component here in the ng on init method

we are going to call the get employees

method and then subscribe to the

observable so I'm going to remove this

assignment and instead we are going to

subscribe to the observable returned by

the get employees method so dot

subscribe the first argument to the

SUBSCRIBE method is going to be a phat

error function that assigns the data

received from the observable to this

local employees property so the argument

is going to be data followed by the fat

arrow syntax and then this dot employees

is equal to data the left hand side is

basically the argument to the function

and the right hand side is the body of

the function we are assigning the

employee data to the employees property

let me explain what exactly is going on

in the Employee List component we have

an instance of the employee service we

use this to call the get employees

method this method returns an observable

so to receive data we need to subscribe

to it once we subscribe to the

observable the employee data arrives

asynchronously we assign that data to

our class property using the fat arrow

syntax so

let's do the same in employee detail

component as well

save this and refresh and you can see

that the application is still intact

I have even added an extra employee in

the JSON file just to make sure that we

are in fact serving the data from the

file using HTTP and not hard-coded data

from the employee service alright let me

quickly summarize what we have done

first we have included the HTTP client

module in our application next we inject

it as a dependency in the employee

service so now we have an instance of

HTTP client which we can refer to with

the HTTP variable we invoke the get

method passing the URL where the request

has to be made and this is nothing but

the file employees dot JSON now the get

method returns an observable but we need

to convert it into a type usable in our

application so we create an employee

interface and cast the observable into

an array of employees now we have a

method get employees in employee service

that returns an observable but the

observable doesn't provide the data

unless someone subscribes to it so in

the employee list and employee detail

components we subscribe to it from the

observable we get the employee data

asynchronously we assign the data to a

property in the component class and bind

it to the view and that is how we fetch

data using HTTP all right thank you guys

for watching don't forget to subscribe

and I'll see you guys in the next video