Javatpoint Logo
Javatpoint Logo

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:

Adding the Pagination Components in MEAN Stack

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.


Adding the Pagination Components in MEAN Stack

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:


Adding the Pagination Components in MEAN Stack

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.

Adding the Pagination Components in MEAN Stack

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.


Adding the Pagination Components in MEAN Stack

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


Adding the Pagination Components in MEAN Stack

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

Adding the Pagination Components in MEAN Stack

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.


Adding the Pagination Components in MEAN Stack

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


Adding the Pagination Components in MEAN Stack

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.


Adding the Pagination Components in MEAN Stack

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:


Adding the Pagination Components in MEAN Stack

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.

Adding the Pagination Components in MEAN Stack

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.


Adding the Pagination Components in MEAN Stack

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.


Adding the Pagination Components in MEAN Stack

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


Adding the Pagination Components in MEAN Stack

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.

Adding the Pagination Components in MEAN Stack

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.


Adding the Pagination Components in MEAN Stack

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

Adding the Pagination Components in MEAN Stack

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






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA