Change Detect Not Working In Directive Event Ouput In Angular 2

I use this directive. However, on the setAddress event output, no changes are detected in my component. The view is not updated. I d'ont understand. For test, if i remove the googl

Solution 1:

Handler for place_changed is running outside angular zone. You need to run it like this:

constructor(..., private zone: NgZone) {
  ...
  google.maps.event.addListener(this.autocomplete, 'place_changed', ()=> {
    var place = this.autocomplete.getPlace();
    this.zone.run(() => this.invokeEvent(place)); // run inside angular zone
  });

Solution 2:

Another possible solution is to inject ApplicationRef and call tick() method to run change detection cycle:

exportclassGoogleplaceDirective  {

  constructor(private app: ApplicationRef, ...) {
    ...
  }

  invokeEvent(place:Object) {
    this.setAddress.emit(place);
    this.app.tick(); <-----------------------------------
  }

This is essentially what zone is doing:

_this._zone.onMicrotaskEmpty.subscribe({
    next: function() {
        _this._zone.run(function() {
            _this.tick();
        });
    }
});