Adding the Pagination Components in MEAN Stack

From this section, we are going to start a new module of MEAN Stack. In our previous module, we added image upload, and in this module, we will add the pagination components and use them in our application. In this section, we will learn about how we can add the pagination components in MEAN Stack.

Pagination is the process of splitting the contents of a website, or a section of contents from a website, into discrete pages. Pagination in web applications is usually controlled by a code, which typically orders dataset items from newest to oldest.

Now, we will handle pagination, which means we need to control to always display all posts but we can switch between different pages. So, between different sets of posts, we only display two posts on the first page, two posts on the second page and two posts on the third page, and we can switch between these pages to load the appropriate post for each page.

That is a common pattern because we don't want to download all the posts by default because if we have more posts in our database, we will download a lot of data, which not only mean that we transform more data over the wire, it would mean that we display a lot of data which might be hard to navigate through for the user.

The way we implement pagination will give the user flexibility to decide how many posts the user wants to display on a given page. For that, we will use a special component provided by Angular material. If we go to the angular material's official site, we will see the paginator there, which will be part of the Data table. A paginator will look like this:

We will use the following steps to implement this in our application:

1) We will go to our module.ts file and unlock the MatPaginatorModule by importing it from '@angular/material'. We will also add it to our "imports" array as we added other modules previously. After doing that, this module will be unlocked, and we can use it.

2) Now, we will go back to the html file of our post-list component, and in below of the </mat-accordion>, we will add the <mat-paginator> like as:

3) This paginator needs some configuration because if we just add it like this and go back to our angular app, we will see it with some default settings.

4) We want to customize the number of pages or items we fetch per page and define which page we currently on with and so on. So, we will add a couple of properties. The first property is the length property, and it simply allows us to define how many items we have in total and later, we will dynamically fetch this from the backend. We will go back to our post-list.component.ts file, and here we initialize a property totalposts and set the value ten as default.

Now, we will go back to our html file and bind the length to totalposts by wrapping length into square brackets like as:

If we go back to our app, we will see that we got ten posts registered here.

5) We will set up which page we are currently on by binding the pageSize property. The pageSize also has to be bound to a number, so we will add a new public property, i.e., postperpage, and we will set this to 2 by default.

We will now bind our pageSize property to postperpage like as:

6) We also want to add the dropdown where the user can choose how many items the user wants to see on a given page. For that, we will create another public property in our typescript file. We will name it pageSizeOption. This property should be an array of the option like 1, 2, 5, and 10.

Now, the user would be able to choose between 1 to 5 and 10 items per page. We will bind it to another property on mat-paginator, i.e., pageSizeOption like this:

Now, if we save both the files and go back to our angular app, we will see that our dummy paginator has all these three features.

7) Now, if we use it, it doesn't do anything. For that, we need to listen to an event, and that event is emitted whenever we change the number of items per page or the current page, and the event is the page event. We will call the method name onChangedPage and will forward the event object this @angular/material paginator gives us. We can access it with $event as always, and this will call the onChangedPage() method whenever we switch the page, and it will give us some information about the page event.

8) Now, we will go to the typescript file of our post-list component, and here we add our onChangedPage() method. We know that we get some page data, which will be of type PageEvent. PageEvent is a type that needs to be imported from @angular/material.

PageEvent is an object holding some data about the current page. We log in to the console to see what is inside of this.

We will go back to our application, and if we switch the page, we get an object with information about the current max number of items known by our paginator, we get information about the current page index, we get information about the current page size selected in that dropdown, and we get the last page index.

We will now use that data to narrow down the number of items we retrieve from the backend. We have to do some work on the backend, and before that, we will add some spacing between the paginator and our accordion so that we have the drop shadow at the bottom again.

9) We will write the CSS code for adding some spacing between them. We will use the mat-paginator as the CSS selector and set margin-top to 1rem.

Now, if we go back to our angular app, we will see the spacing between our mat-accordion and mat-paginator.

In the next section, we will work on the backend code to narrow down the number of items we retrieve.