pagination with angular4 and jquery

Question

I try apply pagination in angular 4 and jquery but I have error when I click in next button it moving for first 2 pages and then moving 3 other pages and then moving 5 other pages( when click)..

code component:

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

next() {
  $('.next').click(function () {
    $('.current').next('li').trigger('click');
  });
}

code html:

<ul>
  <li class="previous">Previous</li>
  <li class="next" (click)="next()">Next</li>
</ul>

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

class current is add in when I click in page 5 for example but error class current it moving 2 pages for first click and next click moving 3 other pages and next click moving 5 pages

Answer 1

You are already binding the click event in your HTML template:

<li class="next" (click)="next()">Next</li>

And in your component you're adding a new click handler on every click:

next()
{
   $('.next').click(function(){
     $('.current').next('li').trigger('click');
   });
}

So what you actually want to do is just relay that click in the method instead of adding a new handler:

next()
{
   $('.current').next('li').trigger('click');
}