Why angular does not populate view in dynamically created component?

Question

I have a component that using third party map library. MousePositionComponent is in my MapModule.

@Component({
  ....,
  template: `<span>{{coordinate}}</span>`
})
export class MousePositionComponent implements OnInit {

  public coordinate: string;

  ngOnInit() {
    this.map.on("click", this.onMapClicked());
  }

  private onMapClicked(): (evt: MapBrowserEvent) => void {
    return (event: MapBrowserEvent) => {
      let coordinate = this.transformCoordinate(event.coordinate);
      this.coordinate = this.formatCoordinate(coordinate);
      console.log(this.coordinate)
    }
  }
}

So I am using MapModule in my ApplicationModule. If I use in a dynamically created SommeComponent, it works. If I have AnotherComponent that dynamically created, the view does not update, but console.log(this.coordinate) works.

onik · Accepted Answer · 2020-06-08 14:47:39Z

2

the function executes outside Angular's zone, so you need to tell it explicitly, to run change detection on click event

constructor(private ngZone:NgZone){

}



 ngOnInit() {
    this.map.on("click", this.ngZone.run(()=>this.onMapClicked()));
  }

  private onMapClicked(): (evt: MapBrowserEvent) => void {
    return (event: MapBrowserEvent) => {
      let coordinate = this.transformCoordinate(event.coordinate);
      this.coordinate = this.formatCoordinate(coordinate);
      console.log(this.coordinate)
    }
  }

answered Jun 8, 2020 at 14:47

onik

1,7411 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

barteloma Over a year ago

How to remove event ngOnDestroy?

onik Over a year ago

reference this callback somewhere in components field and on ngOnDestroy call thiss.map.removeEventListener("click",callbackReference)

barteloma Over a year ago

But we put this.ngZone.run() function in this.map.on method. So I think use for removing like this.mapComponent.map.un("click", this.ngZone.run(() => this.onMapClicked())); is it true?

Collectives™ on Stack Overflow

Why angular does not populate view in dynamically created component?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related