I have been working on a web app that connects to a Firebase realtime database. Initially, I used property binding to update the view whenever a specific value in the database changed. This method worked perfectly and the view was updated in real-time.
However, I recently made changes to the database logic and now I need the view to display the value of the most recently added child in a specific path of the database. I modified the service for the component without altering the component's logic. Now, the component is receiving data from the service in real-time, but the property binding only updates the view after a mouse event (such as a click or wheel up). I have confirmed that the component is instantly getting the value, so why is the property binding not updating the view as expected?
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>