Suppose you have a lot of data, like too much to show in a single page or data table. Well, pagination in material design allows users to browse page chunks of your data. Although techniques like infinite scrolling are popular, one advantage of pagination is you have more control over the page size.
If you’re not careful, an infinite scroll can eat up a lot of memory. It’s good practice to let users select the number of records they’d like to see on a page and then give them forward and backward links to move between pages. The server has the responsibility of loading the data for the selected page. We don’t want to send too much data from the API.
Let’s add pagination to our orders table in material design now. Returning to Visual Studio, let’s command-P and open the orders.modules.ts file, and let’s go ahead and add the paginator on line 16, import the MatPaginatorModule from @angular/material/paginator.
And I’ll go ahead and copy that module name from 16 and we’ll go down to where we import. And I’m going to put that on line 34. Save that, and now let’s go ahead and add the pagniation.
I’ll command-P and open the order-list.component.html file and we’re going to go down below the table, below the div and let’s go ahead and add the mat-paginator element. It’s pretty simple, it has just a few directives that we care about.
One is the length, which is how many records there are. We’re going to put that in the code behind, and the page size equals the page size. The page size options, this is what’s available in the drop down for page sizes, and we’re going to make an array for that.
And then we’re going to need an event whenever somebody makes a change. So this would be either changing the number of records per page, or going forward or backwards. So the event is called page, and we’ll call onPageChange, and we’ll pass the event.
Now we’ve done that, we can go ahead to the code behind. Now we’ll command-P to the order-list.component.ts file, and let’s go up to the very very top, and let’s go ahead and import the page event, which we’re going to need when somebody actually triggers a page event from the paginator. And that’s going to come from @angular/material.
And then we’re going to scroll down to the order list component itself, and we’re going to add some new properties in here. So let’s go ahead and put a property for the length, which we said was the number of rows, and we’re just going to make it a hundred rows for now.
You’ll actually want to put a query in here. And we’re going to set our page size to something like 10. And let’s make some page size options on line 82, and we’re just going to go ahead and make these one, two, five and 10.
Now we’re going to change the way we load data. See before on line 78, we’re just initializing this data source, let’s change the way we do this. So let’s instead call this a MatTableDataSource, which is a type of object.
And we’re going to make a load method. So the load method is going to get called from ngOnInit on line 89, this.loadData, and we’re going to pass this a zero for the page number, and the page size. So we’re going to force to load data from the first page.
Now that we’ve done that, let’s go ahead and make our load data function. Page index, page size. And we’re going to go ahead and call this.dataSource equals and we’re going to initialize that data source just like we used to, but now it has a type of object.
And we’re going to grab our element data, but just to show the data flickering on the screen, we’re going to go ahead and slice that array and just grab the page index that is selected and the page index plus the page size of that array so we can see data growing and shrinking as we go.
And now that I’ve done that, I’m going to go ahead and add one more thing here, which is the page event itself and we should be good to go. Let’s save that, and let’s mpm start and see if we got everything right.
Okay, and so I’ve got my records showing, I see my paginator, let’s go ahead and try and change the numbers of items per page, and we see that that did not work, and we see that the page navigation’s not working. So let’s inspect and see what we did wrong. And I see I have a bunch of mistakes here, onPageChange is not a function.
So let’s go ahead and create that onPageChange function, which I forgot to add. And that’s going to be right here, and it’s just going to be a function called onPageChange, and it’s going to take a page event. Now, here’s how the page event works, I can pull out the selections from the user.
So, if I wanted to show you all of them, I could get the previous page index from E, that previous page index. I could get the page index from e.pageindex, and I could get the page size from e.pagesize, and the length I could get from E dot, now I don’t care about all of these properties, but it is kind of good to see them coming in.
What I really do care about is I want to reload the data whenever this changes. So we’ll pass the page index and the new page size, and we should actually save that page size as well. So let’s go ahead and change page size to save to this.pageSize, and we’ll go ahead and set index to this.pageIndex.
Let’s go ahead and add page index above page size. Now that I’ve done that, I see some of these properties aren’t even being used anymore, so I’m not going to use length for now, and I’m not going to use previous page index for now.
But I am going to use this.pageIndex, and this.pageSize. Save that. Let’s return to our browser and see if we resolved all of our errors. And now if I cut the page size down to two, you see I have two records, five, one, and I should be able to flicker through them now, too.
See the records are changing as I go through them? So what have we done? We set up a paginator which allows me to change the record size, change how I move forward and backwards and work with a larger data set.