How to fetch data from api in angular 8 stackblitz
angular mat table with API, | Populate API data into Angular mat-table - 2022
Timecodes:
hello beautiful people thank you for joining us again today in today's video i'll show you
how you can populate my table from an api today's video we will be using this api service is a list
of countries i also did a video about how you can confess countries and fetch state
and fetch cities or if you can add that to your form you can check out that video the link is
added somewhere here in this video so we have the regular angular material table with demo data
which is what you have but today we will just replace those data we have this demo data here
today we'll be replacing this data with an api call from that api service if today's
your first time watching our videos thank you so much please don't forget to subscribe don't
forget to hit the notification bell so you can always get notified when we upload a new video
and also leave us a comment let us know what you think about the video it helps us to do better
right hit the like button if you like the video okay without further delays uh let's get to it
so as you can see i already have this demo data from angular material side it's just all of this
i have also created this service we're going to use to consume the api i also have a model country
there's nothing inside of it we're going to fill it together this is going to hold
the countries when i fetch them i also made a video detailed about making api calls so if
you're feeling overwhelmed you can just check out that video is a lot more into okay so the first
thing i want to do is go to the country uh the api and then read the documentation for this one
it requires you to have this is the api the endpoint you need to call and then
uh it requires some key which i already have gives to heaven okay joking all right and this
is what we're expecting an id name and iso 2 so this i'm going to create in the model
all right so i have created the model for the country the next thing is to actually make the
api call and then replace the data place the dummy data with data refreshed from the api so let's go
ahead for us to make api calls we need to import a particular module which is the http
client module intel for app module and then i'll use it so i'm just gonna grab that
because this particular api request requires
authentication we're going to create i'm going to start by creating that uh authentication in
the header so that i can always append that to the calls that i make okay i can do that
first of all in the constructor i'm going to get that api http client service
this is me trying to get the authentication
of the header so that whenever i make the call i can just call this header
then i'm gonna grab my access token my ssq and i'm gonna put it inside here
okay so now we have our http header so this header again is to authenticate us when we make the call
all right let's proceed
now we call that model country
here i'm gonna paste the url
then in our app component or the tiers i'm going to create a variable first
okay i'm gonna import the our service in my app component model
okay so before i begin i need to create a constructor to do that
okay
now we can solo this just so that we can see
if that api call is working before we replace the demo data with api call data
okay let's go check that out so when i reload the page
and then i try to check uh inspect it
and i go to console oh no we have not said that i'm in this that call i need to add it to ng
on init so i'm gonna put it here so that on page load it's gonna fetch the country
okay so i see that i made a mistake in the key that's why we're getting
unauthorized the access key there's a mistake there i'm going to correct it right away
so i'm just going to show you what the mistake is that i did that i made so you look at this
key right this was not included in the key right so i'm just gonna replace that
okay let's try again so now i have 250 countries
which is the first step so i've got all the countries now the next step is to replace and
display those countries in the table the next thing is to replace this dummy data
to replace this dummy data with the data that is coming from the api that is what we're going to do
next all right so to do that the first thing that i want to do is to get to replacing from the html
so here we have one two three four columns but from our result i have only three
columns which is id name and iso 2. so i'm going to start from the html
so i'm going to replace the column definition and element
with those ids now this is uh just like saying uh for each right so we're saying let element
so if i go to my country to the country.ts5
i see i have an id i have name and i have iso 2. i'm just going to replace that so the first column
now why would do we need to do this so you see column definition here
we need to replace it with the columns that are going to come in and replace it so
here we have four i'm gonna reduce that to three
i'm gonna take this one away and this is gonna be id is the id as it is in the api and in the model
so this will be iso 2 and this is exactly the same our chain in the html5
now for our api service doesn't have the default content so i'm just going to get rid of this
right now we have made these changes but we have not changed or loaded data into the data
source so if we look at our screen we're going to have uh so this is only display name because it's
the same thing and this is the column from the static data so we're going to change that so here
that we we fetch the country we're gonna we're gonna load the countries that we've got in here
into this data source so i'm gonna declare data source on top and then
load data source inside this fetch country so i'm going to comment out all of this one up until here
comment this one out since i don't need it anymore and i'm gonna get rid of all of this get rid of it
all right so we're getting lots of errors that's okay
on top here i'm gonna do declare data source and this i'm going to make it n
and then just after we loaded this data into this country
this will be
new map table
data source
and then we're gonna pass this these countries to it
okay so now if we save we get in all the countries it's about 200 and something is a long
long list of countries 250 so this is uh how you load you populate math table from an api call
all right so if you find this or content useful please consider subscribing
hit the like button and leave us a comment and don't forget to share like and if you're feeling
generous you can buy me a coffee using the link uh tab there the link will also be in the description
you don't have to buy me coffees you can just subscribe and you can just like any
of those actions it costs coffee to me thank you so much for watching and see you in the next one
Related queries:
how to fetch data from an api in angular
how to get data from an api in angular
