Rohit Arya Rohit Arya - 3 months ago 27
TypeScript Question

Async data binding in Angular2 taking time even after data is loaded

I am using Firebase in Angular2 to fetch an object.

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
import { ActivatedRoute, Params } from '@angular/router';

selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
export class ExampleComponent implements OnInit {

fireObj: FirebaseObjectObservable<any>;

constructor(private af: AngularFire, private route: ActivatedRoute) {


ngOnInit() {

this.route.params.forEach((params: Params) => {
let id = params['id'];

this.fireObj ="/path/" + id);

this.fireObj.subscribe(data => {
if(data.$value !== null) {
}else {


And I am binding
in the template:

<p>{{ (fireObj | async)?.title }}</p>

Everything works fine as expected, but sometimes console is logging
(say after 1 second) but dom/template is getting updated after 5-10 seconds.

Is there any particular reason for this behavior?


I solved it by explicitly calling run() method of ngZone.

this.fireObj.subscribe(data => {
    // some other code. => {});

I know this is not the best solution, but I have made sure that is called only once (that is during the first callback) as after that Angular is binding to it normally.

Thanks to @SyntacticFructose for guiding me in the correct direction.