title: Angular2 View Not Changing After Data Is Updated
body: <p>I am trying to update my view after a websocket event returns updated data.</p>
  
  <p>I injected a service into my app and call getData() method on the service. This method emits a socket.io event to my NodeJS server which in turn performs an external api call and parses some data. The NodeJS server then emits a success event with the new data that I listen for in my service. When the success event is returned I then update my property on the service that is referenced in my view.</p>
  
  <p>However no matter what I try I cannot get the data to show once the property is updated.</p>
  
  <p>I have searched for a few days now and all I find are blog posts that say this change should be seamless, or that I need to incorporate zone.js somehow, or to try the same logic using forms (however im trying to do this without user interaction). Nothing seems to work for me and I am getting a bit frustrated.</p>
  
  <p>For example: </p>
  
  <p>Lets say I receive an array of strings that I want to create an unsorted list with.</p>
  
  <p>app.ts</p>
  
  <pre><code>import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
  import {MyService} from 'js/services/MyService';
  
  // Annotation section
  @Component({
      selector: 'my-app',
      viewInjector: [MyService]
  })
  @View({
      templateUrl: 'templates/my-app.tpl.html',
      directives: [NgFor]
  })
  
  class MyComponent {
      mySvc:MyService;
  
      constructor(mySvc:MyService) {
          this.mySvc = mySvc;
          this.mySvc.getData();
      }
  }   
  
  bootstrap(MyComponent, [MyService]);
  </code></pre>
  
  <p>MyService.ts</p>
  
  <pre><code>let socket = io();
  export class MyService {
      someList:Array&lt;string&gt;;
  
      constructor() {
          this.initListeners();
      }
  
      getData() {
          socket.emit('myevent', {value: 'someValue'});
      }
  
      initListeners() {
          socket.on('success', (data) =&gt; {
              self.someList = data;
          });
      }
   }
  </code></pre>
  
  <p>my-app.tpl.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;h2&gt;My List&lt;/h2&gt;
      &lt;ul&gt;
          &lt;li *ng-for="#item of mySvc.myList"&gt;Item: {{item}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Interesting enough, I have found that If I incorporate a timeout within my component that updates some arbitrary property that I set on the view after the someList property is updated from the success callback then both property values are updated correctly at the same time.</p>
  
  <p>For instance:</p>
  
  <p>new app.ts</p>
  
  <pre><code>    import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
      import {MyService} from 'js/services/MyService';
  
      // Annotation section
      @Component({
          selector: 'my-app',
          viewInjector: [MyService]
      })
      @View({
          templateUrl: 'templates/my-app.tpl.html',
          directives: [NgFor]
      })
  
      class MyComponent {
          mySvc:MyService;
          num:Number;
  
          constructor(mySvc:MyService) {
              this.mySvc = mySvc;
              this.mySvc.getData();
              setTimeout(() =&gt; this.updateNum(), 5000);
          }
  
          updateNum() {
              this.num = 123456;
          }
      }   
  
      bootstrap(MyComponent, [MyService]);
  </code></pre>
  
  <p>new my-app.tpl.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;h2&gt;My List {{num}}&lt;/h2&gt;
      &lt;ul&gt;
          &lt;li *ng-for="#item of mySvc.myList"&gt;Item: {{item}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So how should I go about getting angular2 to recognize that the data has changed after the 'success' event without updating some other property?</p>
  
  <p>Is there something I am  missing with the use of the NgFor directive?</p>