title: How to dirty-check iterable component property in Angular2?
body: <p>Take a look at this simple Angular2 component:</p>
  
  <pre><code>@Component({
    selector: 'status-area',
    directives: [],
    template: require('./status-area.tpl.jade')
  })
  
  export class StatusAreaComponent {
  
    constructor(private _settings: SettingsProvider) {}
  
    get items() {
       return _.filter(this._settings.features, (feature: any) =&gt; {
        return feature.inStatusBar &amp;&amp; feature.isEnabled;
      });
    }
  }
  </code></pre>
  
  <p><strong>SettingsProvider</strong> has a property <strong>features</strong>, which is modified by another component (for example SettingsPanel). This components linked only by service (no input params).</p>
  
  <p>So, as you have seen I need to fetch only enabled and marked as status-bar compatible features from _settings.features property. </p>
  
  <p>For this purpose I use lodash method find. </p>
  
  <p>However, as you might guess, angular throws an exception in development mode:</p>
  
  <blockquote>
    <p>Expression has changed after it was checked</p>
  </blockquote>
  
  <p>It happens because <code>_.filter()</code> for each pass returns new instance of array, but collection is same. </p>
  
  <p>My question is, how you solve this situation? Or may be there is another solution/approach to handle this case.</p>
  
  <p>In my opinion it would be very useful if angular2 had special decorator like that: </p>
  
  <pre><code>@checkIterable()
  get items() {
       return _.filter(this._settings.features, (feature: any) =&gt; {
        return feature.inStatusBar &amp;&amp; feature.isEnabled;
      });
    }
  </code></pre>
  
  <p>Of course I can solve this by using another approach, with events and events listeners, but it produced a lot of boilerplate code. </p>
  
  <p>Take a look at this example:</p>
  
  <pre><code>export class StatusAreaComponent implements OnInit, OnDestroy {
  
    protected _items;
    protected _removeWatcherFn;
  
    constructor(private settings: SettingsProvider) {}
  
    ngOnInit() {
      this._items =  this._fetchItems();
  
      this._removeWatcherFn = this.settings.onChange.bind(() =&gt; {
        this._items =  this._fetchItems();
      });
    }
  
    ngOnDestroy() {
      this._removeWatcherFn();
    }
  
    _fetchItems() {
      return _.filter(this.settings.features, (feature: any) =&gt; {
        return feature.inStatusBar;
      });
    }
  
  
    get items() {
      return this._items;
    }
  }
  </code></pre>
  
  <p>In this way Angular is happy, but i don't.</p>