How to run multiple chained, variable dependent, pipes in Angular 2
<p>What I'm trying to achieve is to sort the array <code>users</code> according to the User's selection, and split the result into navigable pages of 20.</p>

<p>My template has a table that looks like this</p>

<pre><code>&lt;table&gt;
   &lt;thead&gt;...&lt;/thead&gt;
   &lt;tbody&gt;
            &lt;tr
                *ngFor="let theUser of users | sort: [ sortField, sortAscending ] | paginate: [ pageNumber-1, pageSize ] "&gt;
                &lt;td&gt;{{theUser.id}}&lt;/td&gt;
                &lt;td&gt;{{theUser.attribute0}}&lt;/td&gt;
                &lt;td&gt;{{theUser.attribute1}}&lt;/td&gt;
                &lt;td&gt;{{theUser.attribute2}}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
</code></pre>

<p><code>paginate</code> outputs a section of the input table, <code>sort</code> sorts it according to given parameters. Both pipes were written by me, and work as expected individually.</p>

<p>The component changes the variables <code>sortField</code> and <code>sortAscending</code> in a function bound to clicks on the table header's cells, which calls this function based on the clicked cell:</p>

<pre><code>   sortUsers(field:string): void{
    if(this.sortField==field){
      this.sortAscending=!this.sortAscending;
    }else{
      this.sortAscending=true;
      this.sortField=field;
    }
    this.detector.detectChanges();
  }
</code></pre>

<p>Where <code>detector</code> is an injected instance of <code>ChangeDetectorRef</code>.
Further, <code>pageNumber</code> is bound to a spinner with <code>[(ngModel)]</code>.</p>

<p>My problem is that when I click the table header cells, my pipe's log output indicates that only the first pipe has been invoked, and when I change the value of the spinner, only the second pipe gets invoked. The behavior I'm expecting is that both pipes get invoked.</p>

<p><strong>EDIT:</strong> I worked around this particular case by incrementing <code>pageNumber</code>, calling <code>detectChanges</code>, then decrementing it and calling <code>detectChanges</code> again. I'd still like to know how to solve the general case.</p>

<p><strong>EDIT2:</strong> <a href="http://plnkr.co/edit/CvWZkAoUhGeRQQL5Pc12" rel="nofollow">Plunker here</a>, related <a href="https://github.com/angular/angular/issues/11138" rel="nofollow" title="Bug report">bug report here</a></p>