Angular CRUD - 2: How to fetch data from api in Angular CLI | Get data using laravel api in angular

hey guys welcome back so guys we are continuing our angular Cloud application using laravel API okay so now guys in previous video we have seen how to create the data or insert the data into our database using API and now guys in this video we are going to start with how to fetch the data from the database using laravel API okay so these are my data which is stored inside the database and this is the API where we can fetch the data using this API okay so now guys let's get started so as simple let's move to the angular application okay and now let's begin with the creating the component so let me just arrange everything and close all the files close all the files as simple and now guys begin with the NG generate component which is the student page student hyphen page so before student page I just want to follow in the Pages folder okay so you can just add that pag es Pages forward slash then the student Page hit enter perfect so you find that student page and inside the student page we have a HTML component page okay and first we will set up the route for this so let's go on inside the app routing module.ts file let's copy and paste and here we'll just keep the path students and this is going to be a student component okay student page component just click that and this is student lists okay and you follow that path imported correctly yes let's go to that file okay so this is the TS and you find that HTML is over here let's you can move to that HTML file perfect so we are back to that HTML file and here you start with the div and let us check this page first H1 tag student page okay save it and now you can just check on the route students we have got the students page awesome guys so now guys let's design a HTML table to display all the records okay so first let's move back get started with the container where I need to add margin top 5 also and begin with the card design card header H4 tag students lists and inside this a tag add student I mean add student and let's design this button primary and this will be floating to end and here make it as router link let's paste here and this goes to the student slash create okay and now you move to the card hyphen body and inside this card body you start the table design begin with the table add the class table table striped table border okay then table head table row and table heading that is ID then the name course email then the phone and one created at also when it was created and then let's create the action here and now guys table body and here table row and this will be the table data and insert this let me just add a static value one so let's save and see the output guys a simple refresh awesome so let me see why this margin top okay here it has come a space now save and perfect so if you go on ADD student okay so now get back so when you click on back it should come to the students page okay so what we can do is just move to the student create create component on the back button just add the students and also guys I just want to add on this nav bar okay the students URL so yep let's go inside the partial NAB bar if you don't understand how all this has been created please watch out the first video that is angular installation and creating the pages okay so move back to your navbar file yep copy and paste until this is the students okay students save it and now you can close the snap bar close the student create and back to the students page so refresh will move to students awesome so now guys let's get started with fetching the record using HTTP client so now as simple you need to move on directly to the student page.ts component and inside that we will be writing the code first step we will create one variable called students not colon and it will be a student response okay it is any right now like if you get a object data or what kind of data you exactly prefer just add now student response and this will be imported from your the student service file okay so inside the student service file will be creating that response okay so you can just add that like export interface student response open and close curly brace and what is the response so I'll show you so this is my exact response guys what I am getting the data let's copy that and paste here Okay so let me remove all this unwanted things and this would be a number and this is going to be a string string so let me just paste it guys are simple so guys this will be getting the response so this response only what we are doing we are going inside the student page component file and pasting here and now we need to import that service so for that first you need to use inside the Constructor function open and close curly brace here you pass like private student service colon then your student service okay so this is my student service so inside this only we are using it so let's copy and just add comma and paste it here that's it guys so here you see you are inside the service from that I am calling this response and pasting it as simple guys and make sure this is going to be array of data it's not a single object okay it's array of data and then now you can take this variable and paste for the loop purpose so what data you are going to give so we don't have any data right now so for that we are going to get the data from the API so on the page load NJ on a net function open and close curly brace and now guys inside this I will create a get student student lists function and now guys you can just create this function here open and close and now guys inside this function we are going to call the HTTP client request okay so for that we are not going to call the HTTP client request we will be using the student service so here this dot student service dot get student function okay so we need to students will mention okay we have multiple data so what we'll be doing let's copy this function name and get back to the student service and create a HTTP call request okay so let's go there on the student service so which we have created in the previous video if you don't follow please follow that and then you can understand what is this Services going on now here you create the get student function as simple guys let us copy this and paste here the same request and make this to get method and the API is going to be the same because here you see I use the same API to get the data let's paste that and here you are not passing any input it's just getting the response okay and now guys this service will use this get students inside your pages okay I mean student page of your component.ts file from here it will call the data all set from then use a subscribe function and get the response so you can add you get the response colon any let me add this inside a bracket so you get any response this Dot your variable students let's copy this and paste here equal to your response dot whatever the data you get so we don't know exactly from what variable we are getting so what we'll do we'll console the response first console.log res response and now guys let us check the output so when the page loads this calls the on init function and this on init calls this function and this function is calling the HTTP client with the help of student service okay so angular Services we are using it from there we are calling it and getting the data so now guys what we have to do let us get back and see the response first okay inspect so just press F12 it will open the console and if you refresh here you see guys you have got the data it's status 200 and here is the students variable inside that two records are found so let's copy the students variable and get back so response Dot students you're getting okay so this thing only are going to store inside this variable students awesome so now you can save it and yep so you take this variable and go to your student page component.html file inside that file you Loop your data NG for and here is your list so this dot students to item and item is nothing but the each value item dot ID the name the course the email then phone and then created underscore at and then finally uh edit button and delete button use a tag and just add edit class button button button success for edit and danger for delete delete and what we'll do we'll make this delete as a button not as a tag here it's going to be a button and make this to type b u t t o n button and here let's make it to router link and by default I just redirect to home page let's save and now let's see the output okay refresh awesome guys so we have got the data inside the HTML format perfect so now guys I just want to add a loading part before it loads the data so yep it's your insert this table before the table open and close div user NG if else hit enter just set is loading copy this and this is the template name right and here let's tell else table block okay you can mention in this way so if you want to use this you have to use in a Ng hyphen template close the angle and just add a hashtag inside this and paste that same variable and now you can completely push this table inside your NG template tag and now here you can use your loading part so we have already created the loader component where this is the code okay and the title is already set over here done so now guys let us ignore this loader and add that loader component here okay loader and end the loader that's it guys so now you need to set this is loading inside your component page dot PS so when the students list is called you need to call it this dot student list equal to true okay and once the data is loaded you make it to false so this is loading variable is not created let us add that colon which is Boolean equal to false so when the page loads when the get student list is called we are setting to true save it and now you refresh so you see that loader so guys we have successfully done with fetching the data from our database using the API okay so now guys I just wanted to teach you one more thing about the interface when you get the data from the HTTP client we need to create an interface so that interface is nothing but what type of response you want to get okay what type of respond you want to specify so let me just show you let us remove this and just console the log of response and here if you see that it is telling status and the student so only two data are coming in the response so we need to specify that so how can you specify as an interface in angular so for that let me get back to the service so we are using the HTTP client over here in the get method we are open and close and we will tell Student Response response type so what kind of response type we are getting so let's copy this and create a interface so yep here only will create it export interface oops export interface the interface name open and close calibration status colon which will be a number number and then you can add a comma here and then students colon and what data you get we are getting array of data or object of data you can mention that over here so basically we are getting this response only right so you can copy this and paste here and just mention it is coming inside the array okay now you can save it and and get back to this page component and now guys you can remove this any okay because we have already set the interface what we are getting and then you can use in this format so if you refresh here everything works smooth I just want to show you that if I remove this interface so I'm going to remove this let's save it and if you get back here you get a error that it doesn't have anything so we will set that as an interface so here you see you face the error if you just add here any a n y n e so it's except okay any data might be getting so instead of doing in this way we set the interface in the student service so let me just undo here so we are setting that this response will be getting in this format and so you can use this inside your page component okay so this is one interface in the angular so you can use this way or else you can just add any and skip that interface part in that okay so it's at your comfort how you use it so now guys let me save it and let's run again here everything works fine so guys in this video that's it we have successfully learned how to fetch the data from the API in angularjs okay so now guys let's continue next video about edit the data and update the data in angulars using API so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 1,682

Keywords: fundaofwebit, fetch data using api in angular, get data from api in angular, get data from api and display in angular, how to fetch data from api in angularjs, retrieve data from api in angular cli, angular 16 crud operation tutorial, get data from database using api in angular, angular laravel api crud operation, how to retrieve fetch data using laravel api in angular 16 cli, angular crud tutorial, angular cli crud operation

Id: KXczdVwkx2Q

Length: 18min 36sec (1116 seconds)

Published: Fri Jun 02 2023