How to update/bind view after data changed in FireBase?

Question

I am fetching data from Firebase and I expect my component view should update when data available but it was taking more than 15 sec to update data on the view. Following is my component and template code.

There is some delay between data availability and view binding in my case, why? Or how to notify Angular to data get updated so update the view immediately?

@Component({
    ...
})
export class BoardComponent implements OnInit {
    private db: firebase.database.Database;
    public boards: Array<any>;


    constructor(private route: ActivatedRoute,
        private authService: AuthService) {
        this.db = firebase.database();
        this.boards = new Array<any>();

    }


    ngOnInit() {
        this.loadBoards();
    }

    loadBoards() {
        var ref = this.db.ref('/boards');

        ref.on('child_added', (child) => {
            console.log("Question added! adding data one by one");
            var obj = child.val();
            obj.key = child.key;
            this.boards.push(obj);
        });
    }
}

Template :

...

<tr *ngFor="let item of boards">
    <td>{{item.name}}</td>

</tr>

...

This is probably because Angular's default trackBy function tracks the reference of an object (which isn't changing as the array is the same, [this answer](https://stackoverflow.com/a/45311911/6894075) explains it well. — 0mpurdy, Aug 06 '17 at 14:34
try using `NgZone` - `ref.on('child_added', (child) => { NgZone.run(()=> {var obj = child.val();..` — Max Koretskyi, Aug 06 '17 at 14:43

score 4 · Accepted Answer · answered Aug 06 '17 at 15:10

You need to use NgZone because firebase.database.Database update happens outside of Angular zone and change detection is not triggered:

 constructor(private zone: NgZone, private route: ActivatedRoute,

 loadBoards() {
    ...
    ref.on('child_added', (child) => { NgZone.run(()=> {var obj = child.val();..

How to update/bind view after data changed in FireBase?

1 Answers1