title: Angular 2 UI not updating when items added to array on image.onload()
body: <p>I am attempting to add images to an array and display them on the screen. I do not want to display the images until after the browser has loaded them. I have .onload call back specified on the image object and am adding the image to the array within that callback. The UI is only updated when a click event or some other "change event" happens. I looked in to observables but feel like thats a bit overkill for something this simple. I believe in angular 1 there was some sort of $watch that could be done to class properties. This seems trivial... object gets updated, UI should reflect it. Any help is appreciated. Thanks :)</p>
  
  <p>Here is a <a href="http://plnkr.co/edit/m32sk4DJWpSnJpRwcMAF" rel="noreferrer">plunker</a> demonstrating what I am trying to do. I am adding X kittens in the constructor. If that code is removed, the first "Add Kittens" press will not update the UI but subsequent additions of kittens will show previous kittens...</p>
  
  <pre><code>private addItem(itemsArray) { 
      var randomnumber = Math.floor(Math.random() * (500 - 200 + 1)) + 200;  
      var imageObj = new Image();
      imageObj.src = "http://placekitten.com/300/"+randomnumber;
  
      imageObj.onload = function () {       
          itemsArray.push(imageObj);
      }
  }
  </code></pre>