Posted on Aug 5 • Originally published at bezkoder.com In this tutorial, I will show you how to make Angular 16 Pagination example with existing API (server-side pagination) using ngx-pagination.Related Posts:Fullstack with Node.js Express:Server side Pagination with Node.js and AngularFullstack with Spring Boot:Spring Boot + Angular: Server side Pagination exampleOne of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don’t want to see all of them at once. Paging means displaying a small number of all, by a page.Assume that we have tutorials table in database like this:Our Angular 16 app will display the result with pagination:You can change to a page with larger index:Or change quantity of items per page:Or paging with filter:The API for this Angular client can be found at one of following posts:These Servers will exports API for pagination (with/without filter), here are some url samples:This is structure of the response (server-side pagination) for the HTTP GET request:This is a kind of server-side paging, where the server sends just a single page at a time. ngx-pagination supports this scenario, so We actually only need to use tutorials and totalItems when working with this library.ngx-pagination provides NgxPaginationModule for displaying pagination with numbers and responsive style.There are 2 main things that we're gonna use: Use the id if you need to support more than one instance of pagination at a time.For example, this is the default display for simple pagination-controls above:We can customize the label displayed on the "previous"/"next" link using previousLabel/nextLabel, and enable "responsive" to hide individual page links on small screens.For handling page changes, we pass handlePageChange to pageChange.Notice that count is totalItems in the API response, and page is the current page.pageChange is the expression invoked whenever the page changes via a click on the pagination controls. The $event argument will be the number of the new page.There are more attributes that ngx-pagination supports:You can find the details at: https://www.npmjs.com/package/ngx-pagination.Let's open cmd and use Angular CLI to create a new Angular Project as following command:You can follow step by step, or get source code in this post:Angular 16 CRUD example with Web APIThe Angular 16 Project contains structure that we only need to add some changes (in tutorials-list component and tutorial.service.ts) to make the pagination work well.Or you can get the new Github source code at the end of this tutorial.We need to install ngx-pagination with command:npm install ngx-paginationThen open app.module.ts and import it:This service will use Angular HttpClient to send HTTP requests.services/tutorial.service.tsIn the code above, you can see that we pass params object to GET method.The params object will have one, two or all fields: title, page, size.This component has:components/tutorials-list/tutorials-list.component.htmlWe will have following variables:For pagination, we're gonna use TutorialService.getAll() methods.components/tutorials-list/tutorials-list.component.tsLet me explain some lines of code.In the retrieveTutorials() method:handlePageChange() and handlePageSizeChange() methods are for setting new page and pageSize, then we invoke retrieveTutorials() that updates the tutorials List when pagination information changes.First you need to run the Server at one of following posts:Then you can run our App with command: ng serve --port 8081.If the process is successful, open Browser with Url: http://localhost:8081/ and check it.Today we've built a Angular 16 Pagination example that consume API (server-side pagination) successfully with ngx-pagination. I hope you apply it in your project at ease.Happy learning, see you again!You can find the complete source code for this tutorial on Github.Fullstack with Node.js Express:Server side Pagination with Node.js and AngularFullstack with Spring Boot:Spring Boot + Angular: Server side Pagination exampleTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse christine - Jul 26 Imam Ali Mustofa - Jul 26 LEANDRO - Jul 26 Teodor Dermendzhiev - Jul 26 Once suspended, tienbku will not be able to comment or publish posts until their suspension is removed. Once unsuspended, tienbku will be able to comment and publish posts again. Once unpublished, all posts by tienbku will become hidden and only accessible to themselves. If tienbku is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Tien Nguyen. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag tienbku: tienbku consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging tienbku will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.