jaruesink jaruesink - 7 months ago 102
Javascript Question

Angular 2 Change Detection delayed several seconds with Arrays and @Inputs

I know there is a ton of information on change detection in Angular 2 and I've been doing my best to wrap my head around it. I thought my issues might have something to do with the mutability properties of Array, but I am not sure. So we have these "buckets" coming in from Firebase and I'm pushing them into an array which then gets passed into a child component. This all works and the Array gets filled rather quickly, but it takes several seconds for it to render on the page. (However when I try adding a few setIntervals and setTimeouts, it works much more quickly, but I'd rather not do that hack unless there is a clean solution that way.) Does anyone understand what is going on behind the scenes well enough to explain it simply to me and help me out? Thanks!

import { Component } from '@angular/core';
import { BucketService } from '../../services';

selector: 'home-page',
template: `
<header [title]="'Buckets'"></header>
<bucketlist [buckets]="buckets"></bucketlist>
styleUrls: ['./home.page.scss']
export class HomePage {
buckets: Array<any> = [];
constructor(public bks: BucketService) {
bks.subscribe(bucket => {
console.log('bucket pushed: ', bucket);


See Solution #2 here: angular2 firebase realtime updating not working

"Simply put the definition inside the class of angular2, not outside, and everything started working as I assumed initialy."