title: Angular2 change detection: ngOnChanges not firing for nested object
body: <p>I know I am not the first to ask about this, but I can't find an answer in the previous questions. I have this in one component</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;col-sm-5&quot;&gt;
      &lt;laps
          [lapsData]=&quot;rawLapsData&quot;
          [selectedTps]=&quot;selectedTps&quot;
          (lapsHandler)=&quot;lapsHandler($event)&quot;&gt;
      &lt;/laps&gt;
  &lt;/div&gt;
  
  &lt;map
      [lapsData]=&quot;rawLapsData&quot;
      class=&quot;col-sm-7&quot;&gt;
  &lt;/map&gt;
  </code></pre>
  <p>In the controller <code>rawLapsdata</code> gets mutated from time to time.</p>
  <p>In <code>laps</code>, the data is output as <code>HTML</code> in a tabular format. This changes whenever <code>rawLapsdata</code> changes.</p>
  <p>My <code>map</code> component needs to use <code>ngOnChanges</code> as a trigger to redraw markers on a Google Map. The problem is that <code>ngOnChanges</code> does not fire when <code>rawLapsData</code> changes in the parent. What can I do?</p>
  <pre class="lang-js prettyprint-override"><code>import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';
  
  @Component({
      selector: 'map',
      templateUrl: './components/edMap/edMap.html',
      styleUrls: ['./components/edMap/edMap.css']
  })
  export class MapCmp implements OnInit, OnChanges {
      @Input() lapsData: any;
      map: google.maps.Map;
  
      ngOnInit() {
          ...
      }
  
      ngOnChanges(changes: { [propName: string]: SimpleChange }) {
          console.log('ngOnChanges = ', changes['lapsData']);
          if (this.map) this.drawMarkers();
      }
  </code></pre>
  <hr />
  <p><strong>Update:</strong> <code>ngOnChanges</code> is not working, but it looks as though <code>lapsData</code> is being updated. In the <code>ngOnInit</code> is an event listener for zoom changes that also calls <code>this.drawmarkers</code>. When I change the zoom I do indeed see a change in markers. So the only issue is that I don't get the notification at the time the input data changes.</p>
  <p>In the parent, I have this line. (Recall that the change is reflected in laps, but not in <code>map</code>).</p>
  <pre class="lang-js prettyprint-override"><code>this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);
  </code></pre>
  <p>And note that <code>this.rawLapsData</code> is itself a pointer to the middle of a large json object</p>
  <pre class="lang-js prettyprint-override"><code>this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;
  </code></pre>