Angular 2 server side paging using ng2-pagination

Published on March 31, 2016 in .NET, TypeScript, Web API · Read time 9 minutes

Angular 2 is not quite out of beta yet (Beta 12 at the time of writing) but I’m in the full flow of developing with it for production use. A common feature, for good or bad, is to have lists/tables of data that the user can navigate through page by page, or even filter, to help find something useful. Angular 2 doesn’t come with any out of the box functionality to support this, so we have to implement it ourselves. And of course what the means today is to use a third party package! To make this happen, we will utilise n2-pagination , a great plugin, and Web API. I’ve chosen Web API because that is what I’m using in my production app, but you could easily use ExpressJS or (insert your favourite RESTful framework here). Checklist Here is a checklist of what we will do to make this work; Create a new Web API project (you could very easily use an existing project) Enable CORS, as we will use using a seperate development server for the Angular 2 project Download the Angular 2 quick start, ng2-pagination and connect the dots Expose some sample data for testing I will try to stick with this order. Web API (for the back end) Open up Visual Studio ( free version here ) and create a new Web…