How to fetch data from an api in angular
Fetching Data from REST API in Angular
Timecodes:
hello guys my name is bastian passion in
this video i will go through how to
actually fetch data from backend or from
an api per se
and the thing the first thing we want to
be able to do is we need to set up a
route so we'll create a component
ng generate component let's call it home
and we also want to set up a service so
just call it ng
generate service my data so it will be
named my data service
uh so once this is done just find
apparently module here we need to
specify a path so when we are on empty
it will be like on the main screen in
this case
and use component home component in this
way so we want to the home component to
be the first page so now you should be
able to see home works
jump into the home component let's just
add the hd tag fetching data from
backend
and what we need to do now is
essentially we need to add http sorry uh
we need to add
an import which is going to be http
client module this one is essentially
making it possible for you to for us to
use the ht http client within angular
so we're going to import it
and we're it's going to be imported from
angular common http
alright so
now that we have done this we have set
up a route we are ready to go we need to
create a service if we already haven't
yeah we have created the service so
let's jump into it now we need to inject
so we need to inject http here and from
http client
this will make it possible for us to
actually make a get or post or put or
delete there's probably multiple ways to
do it this is the most
common case in angular so let's call it
get data we don't need to add type
search it's not
so return this dot http and here you can
say git dot get
dot delete put post whatever we're going
to look at get today and we are looking
at a um
a free api
so the free api that we're going to use
is essentially open brewery um
so it's it takes a page
how many items per page in a query let's
just enter test
in this case just for testing purposes
now we have actually set up a function
that returns an observable which returns
the response from this api
all right so now we can go to our home
component so home component
if you do control p and this is the way
you can search for it
just for your information so now we need
to inject
my data service okay
my data service and then you can say hey
this my data service get data honestly
just move it to ngon init
and you can subscribe data
and you can say
my data
and
you can say this my date equals to data
of course it's going to complain about
typing so you cannot just add an any
type
to it just for now you should always
type it this is just for
visibility purposes
so now we have actually received the
data my data
we can print it here
and you'll see that we have all of the
data
then
there's even alternative ways because
this will will force us to automatically
unsubscribe to it
because when you subscribe to something
and you don't unsubscribe to it it will
cause memory leakage so one if you
always know that it will be fetch always
once
either you could do this you can say hey
i want to take one because this was will
essentially unsubscribe it will complete
it
so if if we compare this to
the most preferred one which would be my
data like this
the code differences would be huge
so
look at this difference
it will fetch the data it will fetch the
observable and when we go to html of the
code we can say hey we have let's say we
have a list
and we loop through the list and we say
hey let the item so item is one row of
the api of my data
and the dollar sign is used to actually
visualize that you have an observable it
makes it much more easier for you to
understand what is this is this an
object or is it an observable and so on
so always use the dollar sign it's a
common pattern
so let's say
let's print all of the ids for the items
that we find in this case and you'll see
one two three four five this is what we
specified in our api so in this way you
don't have to unsubscribe to it you
don't have to do anything but a common
thing would be that hey i still want
this data for me to be available in my
component because now it's it's not
available in the component
and and one common way to do it is to
use the path tab functionality so you'll
do
pipe and then you will tap and you say
data and let's see here
this my data equals the data
and you need to import a tab from rxjs
library in this case and what it will do
is essentially whenever the observable
is triggered it will run this tab
functionality and it will define your
data to be defined also in the component
because we set it to be mydata in this
case
so if you go to html here as you can see
it has prompted my data as a json format
which means we have actually received my
data in the component and this is very
useful for different purposes maybe you
want that filter functionality or maybe
you want to do some logic in the
component based on this
all right guys thank you for me this is
this is the way how you fetch data from
uh from back end the most common way
would be to use pipes uh the async pipe
in this case it's a very common pattern
use it as much as possible
and thank you for listening guys please
leave a comment subscribe
any feedback or anything you want me to
show
really anything guys thank you bye
Related queries:
how to fetch data from api in angular 12
how to fetch data from api in angular 8 stackblitz
how to fetch data from api in angular 14
how to fetch data from api in angularjs
how to fetch data from api in angular 10
how to fetch data from api in angular 12 stackblitz
how to get data from api in angular 13
how to fetch json data from api in angular
how to get data from rest api in angular
