Angular2 change detection: ngOnChanges not firing for nested object
<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>