title: Angular2 pipe causing '...has changed after it was checked' dev error
body: <p>I know why this error is thrown, but I don't understand how to organize my code to fix it. Here is the issue</p>
  
  <pre><code>@Component({
      selector: 'article',
      templateUrl: 'article.html',
      moduleId: module.id,
      directives: [Toolbar]
  })
  export class Article {
      public toolbar: Array&lt;IToolbarItem&gt;;
  
      constructor() {
          this.toolbar = [
              {
                  css: 'ic-save',
                  action: (item) =&gt; { },
                  visible: false
              },
              &lt;IDropdownItem&gt;{
                  css: 'ic-edit',
                  items: [
                      {
                          css: 'ic-edit',
                          label: 'Edit Article',
                          action: (item) =&gt; { }
                      },
                      {
                          css: 'ic-edit',
                          label: 'Edit Content',
                          action: (item) =&gt; {
                              this.toolbar[0].visible = true;
                          }
                      }
                  ]
              }
          ];
      }
  }
  </code></pre>
  
  <p>and the toolbar component and template</p>
  
  <pre><code>@Component({
      selector: 'toolbar',
      moduleId: module.id,
      templateUrl: 'toolbar.html',
      styleUrls: ['toolbar.css'],
      pipes: [VisiblePipe],
      encapsulation: ViewEncapsulation.None
  })
  export class Toolbar {
      @Input() items: Array&lt;IToolbarItem&gt;;
  }
  
  &lt;div class="container"&gt;
      &lt;div class="toolbar"&gt;
          &lt;div class="toolbar-item" *ngFor="#i of (items | visible)"&gt;
          .
          .
          .
  </code></pre>
  
  <p>and finally the <code>VisiblePipe</code> pipe</p>
  
  <pre><code>@Pipe({
      name: 'visible',
      pure: false
  })
  export class VisiblePipe implements PipeTransform {
      transform(value) {
          return (&lt;Array&lt;any&gt;&gt;value).filter(v =&gt; v.visible !== false);
      }
  }
  </code></pre>
  
  <p>So article component uses the toolbar component to which the toolbar array is passed, this is in turn uses the visible pipe to filter out items which have the visible property set to false.</p>
  
  <p>When the <code>VisiblePipe</code> pipe is run, the error is thrown. So for some reason the pipe transform code is running after the change detection? Why?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>So I've updated my <code>VisiblePipe</code> pipe as per the suggestion by Gunter, and it is working</p>
  
  <pre><code>export class VisiblePipe implements PipeTransform {
      private previousValue: Array&lt;IVisibleItem&gt;;
      private cacheResult: Array&lt;IVisibleItem&gt;;
  
      transform(value: Array&lt;IVisibleItem&gt;) {
          if (!this.previousValue || !compareArrays(this.previousValue, value)) {
              this.previousValue = value.map(i =&gt; { return { visible: i.visible }   });
              this.cacheResult = value.filter(v =&gt; v.visible !== false);
          }
  
          return this.cacheResult;
      } 
  }
  
  function compareArrays(arrayOne: Array&lt;IVisibleItem&gt;, arrayTwo:  Array&lt;IVisibleItem&gt;) {
      if (arrayOne.length !== arrayTwo.length) {
          return false;
      }
  
      for (let i = 0, l = arrayOne.length; i &lt; l; i++) {
         let arrayOneEntry = arrayOne[i];
         let arrayTwoEntry = arrayTwo[i];
  
         if (arrayOneEntry.visible !== undefined &amp;&amp;
              arrayTwoEntry.visible !== undefined &amp;&amp;
              arrayOneEntry.visible !== arrayTwoEntry.visible) {
              return false;
          }
      }
  
      return true;
  }
  
  interface IVisibleItem {
      visible: boolean
  }
  </code></pre>
  
  <p>is this really the best/only way? It feels like I'm handling some aspect of the change detection myself!</p>