[SOLVED] Property Binding runs only after mouse action in Angular

Property Binding runs only after mouse action in Angular

I'm creating a web app which interacts with a Firebase realtime database. I was using property binding to update the view when a particular db value changed. Everything worked fine and view were updated in real time.

Now I changed db logic and I need that the view shows the value of the last added child in a particular db path. So I changed the service of the component leaving the component logic untouched. Now the component receives data from the service in realtime, but the property binding updates the view only after a mouse event (click, wheel up...). I checked that the component is receiving the value instantly so why the property binding is not working fine anymore and it updates the view only after a mouse input?

Component Logic:

export class RotazioneVolanteComponent implements OnInit {
   public data;
   constructor(private _service: ComponentService) { }
   ngOnInit(){
      this._service.getValue().subscribe(value => this.data = value);
   }

Component View:

<h1>Value: {{data}}</h1>
<h1 [textContent]="data" ></h1>

Solution

The problem was that Angular doesn't update the view cause the changes aren't done in NgZone. To solve the problem you just need to declare private ngZone: NgZone in the constructor and make the update in:

this.ngZone.run( () => {
   // Update variable
});