Angular API Pagination with dynamic table and cards. #angular #pagination #api

hey guys today I'm going to show you how to query an API that supports pagination from your angular application I'm going to show you how to dynamically populate a table as well as cards using angular material so let's get into it so let's go ahead and get into it I have a search bar I have a toggle button for table and cards and then I have my uh result set um as well as pagination controls here so let's go ah and test it out I can do a search for angular and then I can see if I use the pagein I'm actually quing um different pages from the API let's try a different search Java and then I can see that if I toggle between table and cards I have the same results just in card form so let's take a look at the API um let's use Postman to actually see what the API is providing us so I'm I'm cing the uh GitHub API right here this is the URL and then I'm specifying the parameters Q for query and then what page I want and then the items per page okay so if I do a query for Java uh with page zero and one item per page you'll see that I get an object that describes the search with a total count and then you can see I have a list of items matching my query and then since I only have one result you can see that our array only has one object in it and um I can see that the top result is the algorithm SL Java you can see that in my application um I get the the same result here now let's bump up the per page to five and then hit send again and you can see that we're going to have essentially the same page here so my next result you can see is this item right here so this is where we're getting our API call um effectively everything I do here in Postman is replicating what would be done here in angular so let's see how we actually build this project the first thing you'll want to do is replicate our Json object with models so the top level model is going to describe the search result so we're going to have a total count and then an array of items okay so we're going to have a a GitHub search result model and all we really care about is a total count and then the array of items right here and these are of type GitHub um so that's that's how I described this object so if I look at the GitHub I can specify the parameters that I'm particularly interested in in so the ID this value right here the name the full name the HTML URL so we can see that here the URL language owner I'm uh the owner and license are subobjects so we can see that here here's the owner and then the license see if we you can find that right here so then I can also create models for those objects as well owner and license so now that we have our model set up we can set up a API service here very simple we're just going to do a a git request um I'm going to I'm just going to call this method get for Simplicity and we are returning one GitHub search result object remember that object contains an array of the GitHub items and then we're setting our query parameters just like we do here with Q page and per page and then we send that git request now of course my um method needs to take in from the UI what that query is what the page is is and how many items per page so that's going to be done in our component so let's hop over to our component and there's going to be a few things one I'm creating the columns for the table dynamically and then I also have a um an object or an instance of search result right here so I'm going to have a method search that is invoked when the search bar is utilized and that's just going to call that API service the git method with the query page index and Page size we're going to subscribe to the result and set the result to our data um and then we are also going to set this loading Boolean to false when it completes because that is what is going to drive our loading screen so let's take a look at the template so in the template we're just to have our search bar here always visible and we're going to have our toggle button group here always visible and then we have some conditional divs here so I have uh if we are loading then we're going to show a mat spinner we're going to show it right in the middle of the remaining screen um otherwise if we're not loading then depending on if we have selected cards or table for cards going to show this portion here all I'm doing is uh setting up a mat card within a for Loop and then we're just going to populate um the uh items within the card each search result um otherwise for the table we're just going to create that Dynamic table and display the results now below the table we will have a paginator here and uh we can can control the um event um the events from the paginator within our component and you can you can see that right here handle page event so with the page event we're just going to update our page index and our page size and then perform the search because we want to get a new result set with the new page information so let's see that in action again let's perform a search how about image and you can see the search results here if I hit next page then we're going to get the next set of results next page the next set of results and we can switch to table we're going to see all of that information in the table so again let's go ah and test it out with Postman just to kind of check ourselves here let's do image and search and you can see we're getting the uh the same results here displayed here so not really a whole lot of code pretty simple hey guys if you want to see all the source code check the link in the description I hope you enjoyed this video please consider liking and subscribing and I will see you in the next video thanks

Channel: Thomas Wilde

Views: 105

Keywords: Angular, Angular Material, Api Pagination

Id: xN6YwoxtW5k

Length: 7min 52sec (472 seconds)

Published: Fri May 17 2024