How to refresh / bind view after data change in FireBase?

I am fetching data from Firebase and I expect my component to update when data is available, but it takes more than that to update the data in the view 15 sec

. Below is the code for my component and template.

In my case there is some delay between data availability and view binding, why? Or how to notify Angular about a data refresh so that the view is refreshed right away?

@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>

...