title: Angular2 ngFor does not see updated data within directive callback function
body: <p>I have read various ideas of how to make the angular 2 detection system update the DOM, and I can not seem to get this working. Essentially, I want to make an infinite scroller, and I would like a callback function that is declared within the view to be called at the appropriate time by the directive. Eg, if the distance to the bottom of the page is less than 50 px, then call the callback, then update the data.</p>
  
  <p><a href="http://plnkr.co/edit/hFCUQCYHprVn1XxcuKnT?p=preview" rel="nofollow">http://plnkr.co/edit/hFCUQCYHprVn1XxcuKnT?p=preview</a></p>
  
  <p>So it looks like this:</p>
  
  <pre><code>@Component...
  template: '&lt;div *ngFor="#item in items" infinity-scroller [scrollerCallback]="scrollCallback"&gt;{{item}}&lt;/div&gt;'
  
  constructor () {
    this.items = getMockData(0, 40)
    this.onScrollCallback = this.onScrollCallback.bind(this)
  }
  
  addData () {
    this.items.push(...getMockData(410, 500))
  }
  
  onScrollCallback (ctx) {
    this.items = this.items.concat(getMockData(50, 100))
  }
  
  @Directive
  selector: '[infinity-scroller]'
  inputs: ['scrollerCallback']
  
  class InfinityScroller 
  
  ngOnInit () {
     window.onscroll = () =&gt; onScroll(this)
  }
  
  function onScroll (ctx) {
     ... logic to call the callback function (ie, ctx.scrollerCallback())
  }
  </code></pre>
  
  <p>I added the addData method to test adding data to the view, and that function works perfectly. I click a button, and addData pushes the new items to the array and the view updates. </p>
  
  <p>however, when the callback in the directive makes the call to the inputed "scrollCallback" function, updating the data is not reflected in the DOM. </p>
  
  <p>Any idea why this would be? Thanks in advance!</p>