limit pagination in angular4

Question

I try apply pagination in angular4 but I don't khnow how to apply limit in pagination .. limit : for example I have 1000 pagination how to display in the first 5 pagination then ... then last page : 1 2 3 4 5 .... 1000. in my code I display all pagination 1000 pagination but isn't not good design for client:

code component:

addClass(x)
{
    $(".page-item").click(function () {
        $(this).addClass("current").siblings().removeClass('current');
    });
}

next()
{ 
    $('.current').next('.page-item').trigger('click'); 
}
previous()
{
     $('.current').prev('.page-item').trigger('click'); 
}

code html:

<ul>
   <li class="previous" (click)="previous()">Previous</li>
   <li class="next" (click)="next()">Next</li>
</ul>
<ul class="pagination">
<li *ngFor="let x of pages" class='page-item' (click)='addClass(x)'>
    {{x}}
</li>

and this is screenshot of display in my page:

Answer 1

Some hint:

• You create a pages array containing 1,2,3,4,5... MAX before loading the html
• When clicking next, previous or directly on a page, you recreate the array, if the new page is greater than current +/- 5

Answer 2

You can try ngx-pagination v3.1.0

https://github.com/michaelbromley/ngx-pagination

https://stackblitz.com/edit/angular-e1f9hq