title: angular 2 when adding new item to list, custom pipe not reordering list
body: <p>I implemented a orderby pipe that works fine when the DOM loads. But when I add a new item to the list, my pipe is not being activated and the new item that has been added to the list, is not order - but added to the last place in the list.</p>
  
  <p>The pipe:</p>
  
  <pre><code>import { PipeTransform, Pipe } from '@angular/core';
  
  import { ITeam } from './team';
  
  @Pipe({
      name: "LeagueFilter"
  })
  
  export class LeagueFilterPipe implements PipeTransform {
      transform(value: any[], filterBy: string): any[] {
          filterBy = filterBy ? filterBy.toLocaleLowerCase() : null
  
          for (let i = 0; i &lt; value.length - 1; i++) {
              for (let j = 0; j &lt; value.length - 1; j++) {
                  if (value[j][filterBy] &lt; value[j + 1][filterBy]) {
                      let temp = value[j]
                      value[j] = value[j + 1]
                      value[j + 1] = temp
                  }
              }
          }
          return value;
      }
  }
  </code></pre>
  
  <p>The Html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-offset-1 col-sm-4"&gt;
              &lt;h2&gt;
                  {{leagueTable}}
              &lt;/h2&gt;
  
              &lt;table class="table table-responsive"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;Team&lt;/th&gt;
                          &lt;th&gt;Points&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr *ngFor="let team of teams | LeagueFilter:'points'; let i = index"&gt;
                          &lt;td&gt;{{i+1}}&lt;/td&gt;
                          &lt;td&gt;{{team.name}}&lt;/td&gt;
                          &lt;td&gt;{{team.points}}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
              &lt;div class="row"&gt;
              &lt;fieldset class="col-sm-offset-1 col-lg-3"&gt;
                  &lt;legend&gt;Add Team&lt;/legend&gt;
                  &lt;label for="name"&gt;Name&amp;nbsp;&amp;nbsp;&lt;/label&gt;
                  &lt;input type="text" name="" value="" [(ngModel)] = "newTeam.name" /&gt;
                  &lt;br/&gt;
                  &lt;label for="name"&gt;Points&lt;/label&gt;
                  &lt;input type="text" name="" value="" [(ngModel)] = "newTeam.points" /&gt;
                  &lt;button type="submit" (click)="addTeam()"&gt;Add&lt;/button&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ITeam } from './team';
  
  @Component({
      selector: 'league-list',
      moduleId:module.id,
      templateUrl: 'league-list.component.html',
      styleUrls: ['league-list.component.css']
  })
  export class LeagueListComponent {
      leagueTable: string = "La Liga"
      teams: ITeam[] = [
          { name: "Barcelona", points: 84 },
          { name: "Real Madrid", points: 85 },
          { name: "Valencia", points: 78 },
          { name: "Sevilla", points: 80 },
          { name: "Villareal", points: 62 },
      ]
      newTeam:ITeam = { name:"", points:null };
      addTeam():void{
          this.teams.push(this.newTeam)
  
      }
  }
  </code></pre>