Don't spend time looking for pre-built packages. It's super simple to create your own pagination component in Angular 4. (If you want to skip the tutorial and go straight to the bottom to see the full gist/source code, scroooooll on down.)
Step 1. Create a basic component
I said this was simple, let's create a simple component to begin with.
Step 2. Figure out the Inputs and Outputs of the component
So, we have a basic angular component, but that doesn't do us much good. We need it to do stuff. Let's create a few inputs for this component. First, we need to know how many total items we're paginating through. Then we need to know what page we're on. Then we need to know how many items per page are being shown. We also need to know how many pages to show between the "previous" and "next" buttons. Finally we need some way of disabling the pagination while content is loading, so we'll have a loading input. Here's what that all looks like:
We also need to have some callbacks when a user clicks the previous/next buttons or a page number. Even though we haven't created those DOM elements yet, we can assume they'll come.
So now when we use our component it should look like this:
Step 3. Fill out the pagination component's html template
Now let's create the placeholders for all the numbers in our pagination component. I want it to look something like this:
In order to do this I'm going to reference several methods in this view that we'll create in the next step. I realize that it's not best practice to stick these methods in the view, and that I should probably generate just the values when the component hears the changes. But that's not the point of this tutorial, you can clean it up on your own.
That's all the template needs! Of course, you should make it look good with CSS, do whatever you want. Now for the fun part, all the basic math we need to calculate all those things. I'm going to paste the full text of my pagination.component.ts file here so you can see it all together.
Now, this is really all you need for your pagination to work. The only other things you'll need to add are the variables you pass in to the pagination component (ie, current page, total items, page size, pages to show, etc). You manage the "current page" in your main component, just like you call your services to get the next page of info. The only thing you really pass the pagination component is numbers. You manage all the numbers in your main component. Hopefully that's clear? I'll post a gist that has everything together. I'll go ahead and include the CSS I use in case you care. I'll also include a basic way to call the pagination and handle creating the variables: