title: Angular2 zone.run() vs ChangeDetectorRef.detectChanges()
body: <p>Say I have a <code>function noificationHandler()</code> in my service.ts that is outside of angular's context.
  <code>noificationHandler()</code> is invoked by a third party and <code>noificationHandler()</code> basically consumes an array and emits the array to components which have subscribed to his service.</p>
  
  <p><strong>service.ts</strong></p>
  
  <pre><code>    public mySubject: Subject&lt;any&gt; = new Subject();
      public myObservable = this.mySubject.asObservable();
  
      constructor() {
         this.registry.subscribe("notification.msg",this.noificationHandler.bind(this));
      }
  
      noificationHandler(data) {
         this.publishUpdate(data)
      }
  
      publishUpdate(data) {
         this.mySubject.next(data);
      }
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>constructor(private service: myService) {
      this.service.myObservable.subscribe(list =&gt; {
          this.list = list;
      });
  }
  </code></pre>
  
  <p>^^^ at this point the template is not updated with the new data</p>
  
  <p>Since the <code>"notification.msg"</code> is outside of angular's zone, angular
  s change detection is not run when this event<code>("notification.msg")</code> is invoked.</p>
  
  <p>Now there are 2 ways to invoke change detection.</p>
  
  <p>1) By wrapping the <code>noificationHandler()</code> inside of angular's zone.run()</p>
  
  <pre><code> this.registry.subscribe("a2mevent.notification.msg", this.ngZone.run(() =&gt; this.noificationHandler.bind(this)));
  </code></pre>
  
  <p>2) By individually asking the component to detect changes </p>
  
  <pre><code>constructor(private service: myService, private ref: ChangeDetectorRef) {
      this.service.myObservable.subscribe(list =&gt; {
          this.list = list;
          this.ref.detectChanges(); // &lt;==== manually invoking change detection
      });
  }
  </code></pre>
  
  <p>Both the options work!
  And my component structure is as follows</p>
  
  <pre><code>A --&gt; root component
  B
  C
  D // my component is here (4 levels of nesting)
  </code></pre>
  
  <p>Questions - </p>
  
  <p>1) Will detectChanges() detect changes only for its own components or will it also run change detection on child components?</p>
  
  <p>2) will zone.run() trigger the change detection of all the components from the root till the leaf?</p>
  
  <p>Among the zone.run() and detectChanges() I am curious as to which is better in <strong>performance</strong>?</p>