ng2-pagination not firing page change
<p>So I am getting started with Angular2 and am trying to add pagination through the ng2-pagination component, after a lot of trial and error I have reached the stage where my data appears correctly, the pagination control appears correctly but the page change is not being fired, so I always stay on the first page.</p>

<p>Here is my html</p>

<pre><code>  &lt;div id="item_box" *ngFor="let item of listItems | paginate: 
           {itemsPerPage: 3, currentPage: page};"&gt;
             &lt;! -- Elements to display my data items, all works OK --&gt;
  &lt;/div&gt;

    &lt;div id="pager" class="pagination"&gt;
       &lt;pagination-template #p="paginationApi" (pageChange)="pageChange.emit($event)"&gt;

       &lt;ul&gt;
          &lt;li [class.disabled]="p.isFirstPage()"&gt;
               &lt;a (click)="p.setCurrent(1)"&gt;First&lt;/a&gt;
           &lt;/li&gt;
           &lt;li [class.disabled]="p.isFirstPage()"&gt;
               &lt;a (click)="p.previous()"&gt;Previous&lt;/a&gt;
            &lt;/li&gt;


            &lt;li *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value"&gt;
                &lt;a (click)="p.setCurrent(page.value)"&gt;{{page.value}}&lt;/a&gt;
             &lt;/li&gt;
             &lt;li [class.disabled]="p.isLastPage()"&gt;
                 &lt;a (click)="p.next()"&gt;Next&lt;/a&gt;
             &lt;/li&gt;
             &lt;li [class.disabled]="p.isLastPage()"&gt;
                  &lt;a (click)="p.getLastPage()"&gt;Last&lt;/a&gt;
              &lt;/li&gt;
         &lt;/ul&gt;
    &lt;/pagination-template&gt;
&lt;/div&gt;
</code></pre>

<p>Visually everything looks fine.  </p>

<p>Any my list.component code</p>

<pre><code>import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs';
import { Router, ActivatedRoute, Params } from "@angular/router";

import { PaginationModule } from 'ng2-bootstrap/components/pagination';


@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})

export class ListComponent implements OnInit, OnDestroy  {
  listItems = [];
  private subscription: Subscription;

@Input() id: string;
@Input() page;
@Input() maxSize: number;

@Output() pageChange: EventEmitter&lt;number&gt; = new EventEmitter&lt;number&gt;();

  constructor(private apiService:ApiService, private router:Router, private activatedRoute: ActivatedRoute)
  {

  }

  ngOnInit()
  {
     //Code removed for brevity, but here I execute WS and get data here, populated in this.listItems
     this.listItems == result;
     ...
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
</code></pre>

<p>I get no errors.  but when I click to change the page nothing happens.</p>

<p>I'm sure that it must be something simple, something that I have missed somewhere but what and where?</p>

<p>The examples/code on <a href="https://github.com/michaelbromley/ng2-pagination" rel="nofollow noreferrer">https://github.com/michaelbromley/ng2-pagination</a> don't help and any other examples I find also don't help.</p>

<p>Any ideas?  What have I done wrong?</p>