cpiock cpiock - 3 months ago 19
TypeScript Question

Angualr2 RC4 child component property setter not executed

I have a parent component that includes a child components which displayes a array of places in a map. The places to display are loaded in the parent component. I have this in my parent template:

<map-comp class="container-map" [places]="places"></map-comp>


I load my places in this whay:

myservice.myfunction(myparameters).subscribe((res: Array<Place>) => {
this.places = res
});


In my child component i have this property:

@Input() set places(places: Array<Place>) {
this._places = places;
if (this._places != null) {
this.placesChanged();
}
}


If I load my parent component the set places property is fired with places equal undefined. Then starts myfunction that loads data and sets the property in the parent component but the child parents property is not update.
What I do wrong?

UPDATE
Here is my plunker
http://plnkr.co/edit/MROuH8znbDxTm0HKFG0Q

If I use the self.mapConfigChanged.emit(); outside of the google maps event listner it works. But I need some data from the map so I must use this event

Answer

My friend @juristr solved my issue. Many thanks! The problem is solved by using ngZone when updating the places in the parent control.

http://plnkr.co/edit/cUG1aqhQhnniD9D87rAa

 private mapConfigChange() {

    this.zone.run(() => {
      console.log("parent event fired");
      this.loadPlaces();  
    });
  }