title: Angular2 component with two-way binding Input not trigger the change event
body: <p>I have one paginator component to show the page list and detect when the user click to show another page and this component not change the page only must be trigger the event but I cannot watch the change event.</p>
  <p>The component has an two-way binding to announce the current page changed and work fine because I can show the value in the html after change (please, see <p> in the HTML).</p>
  <p><strong>How I can execute the page change after change the current page in the paginator component?</strong></p>
  <p>I read the following <a href="https://stackoverflow.com/questions/36150107/angular-2-change-event-model-changes">Angular 2 change event - model changes</a> but not work in my case.</p>
  <p>HTML (using the paginator):</p>
  <pre><code>&lt;paginator [pageCount]=pageCount [(currentPage)]=currentPage (ngModelChange)=&quot;pageChanged($event)&quot;&gt;&lt;/paginator&gt; &lt;!--pageChanged is not called--&gt;
  &lt;p&gt;{{currentPage}}&lt;/p&gt; &lt;!--Work Fine showing the new page selected!--&gt;
  </code></pre>
  <p>TS (paginator component):</p>
  <pre><code>import { Component, OnInit, OnChanges, SimpleChanges, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
  
  @Component({
    selector: 'paginator',
    templateUrl: './paginator.component.html',
    styleUrls: ['./paginator.component.css']
  })
  export class PaginatorComponent implements OnInit, OnChanges {
  
    pageList : number[] = [1];  
  
    @Input()  pageCount   : number = 1;
    @Input()  currentPage : number = 1; 
    @Output() currentPageChange = new EventEmitter&lt;number&gt;();
  
    constructor(private ref:ChangeDetectorRef) {}
  
    ngOnInit() 
    {
      this.loadPageList();
    }
  
    ngOnChanges(changes: SimpleChanges)
    {
      this.loadPageList();
    }
  
    changePage(page : number)
    {
      if(page &lt; 1)
          return;
  
      if(page &gt; 1 &amp;&amp; page &gt; this.pageCount)
        return;
  
      if(this.currentPage == page)
        return;
  
      this.currentPage = page;
  
      this.currentPageChange.emit(this.currentPage);    
    }
  
    private loadPageList()
    {
        if(this.pageCount &lt; 1)
          this.pageCount = 1;
  
        let pages = [1];
  
        for(let p = 2; p &lt;= this.pageCount; p++)
          pages.push(p);
  
        this.pageList = pages;
  
        this.ref.detectChanges();          
    }
  }
  </code></pre>
  <p>HTML (paginator component):</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-12 text-center&quot;&gt;
          &lt;ul class=&quot;pagination&quot;&gt;
              &lt;li&gt;&lt;a (click)=&quot;changePage(1)&quot;&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a (click)=&quot;changePage(currentPage - 1)&quot;&gt;&amp;#10094;&lt;/a&gt;&lt;/li&gt;
              &lt;li *ngFor=&quot;let page of pageList&quot; [class.active]=&quot;currentPage==page&quot;&gt;
                  &lt;a id=&quot;changePage{{page}}&quot; (click)=&quot;changePage(page)&quot;&gt;{{page}}&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a (click)=&quot;changePage(currentPage + 1)&quot;&gt;&amp;#10095;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a (click)=&quot;changePage(pageCount)&quot;&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>