title: Sync data between Angular 2 components go nuts
body: <p>I am trying to sync data between two angular components. However it functions a little bit unpredictably.</p>
  
  <p>I have parent component which provides data (synchronously):</p>
  
  <pre><code>@Component({
    /*...*/
    directives: [TbInfiniteScrollComponent],
    viewBindings: [TbInfiniteScrollComponent],
    providers: [TbService],
    encapsulation: ViewEncapsulation.None
  })
  
  export class TbNiV3AppComponent {
    public dealerList:Array&lt;Object&gt; = []
  
    constructor(service: TbService, private cdr:ChangeDetectorRef) {
  
      this.dealerList = service.data.flatten(service.data.get());
  
    }
  
    syncData(data){
  
      /* Unfortunately this doesn't work */
  
      console.log('syncData!', this.dealerList);
      this.dealerList = [].concat(data);
      this.cdr.markForCheck();
    }
  }
  </code></pre>
  
  <p>And its HTML</p>
  
  <pre><code> &lt;tb-infinite-scroll [tbScrollData]="dealerList" *ngIf="dealerList" (tbDataSync)="syncData($event)" [tbIndent]="true"&gt;
     Loading Tree Component...
   &lt;/tb-infinite-scroll&gt;
   &lt;tb-infinite-scroll [tbScrollData]="dealerList" *ngIf="dealerList"  (tbDataSync)="syncData($event)"&gt;
     Loading Tree Component...
   &lt;/tb-infinite-scroll&gt;
  </code></pre>
  
  <p>Then I have child component</p>
  
  <pre><code>@Component({
    /* ... */
    selector: 'tb-infinite-scroll',
    inputs: ['rows:tbScrollData', 'tbElHeight:elementHeight', 'tbIndent'],
    outputs: ['tbDataSync'],
    encapsulation: ViewEncapsulation.None,
    providers: [TbInfiniteScrollService, ChangeDetectorRef],
  })
  
  export class TbInfiniteScrollComponent {
  
    public tbDataSync:EventEmitter&lt;any&gt; = new EventEmitter()
  
    private rows:Array&lt;Object&gt; = []
  
    /* ... */
  
    assignRows() {
       this.visibleRows = this.service.assignVisible(this.rows, this.elementHeight, this.scroll);
    }
  
    constructor(private service:TbInfiniteScrollService, private elementRef:ElementRef, private cdr:ChangeDetectorRef) {
    }   
  
    toggleVisible(children) {
      this.service.changeVisibility(children);
      this.assignRows();
      this.tbDataSync.emit(this.rows);
    }
  
  }
  </code></pre>
  
  <p>And row HTML</p>
  
  <pre><code> &lt;div class="tb-infinite-scroll__row"
         *ngFor="let row of visibleRows"
         [ngStyle]="{'margin-left': (tbIndent ? (row.level - 1) * 15 : 0) + 'px'}"
         (click)="row.children &amp;&amp; toggleVisible(row.children)"&gt;
      {{row.name}}
    &lt;/div&gt;
  </code></pre>
  
  <p>What it does: it changes the <code>visible</code> property of data object children after click and will render only elements with <code>visible === true</code>. As both components share the same data set via parent controller I would expect them to render the same output. But after I click a row in one component of which I want to update, the second component should update as well, however it happens kind of randomly.</p>
  
  <p>I believe this gif will explain my problem better.</p>
  
  <p><a href="https://i.stack.imgur.com/G5CSz.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G5CSz.gif" alt="enter image description here"></a></p>
  
  <p>How do I force a component to refresh from parent component when bound data changes?
  Thanks in advance!</p>
  
  <p>EDIT: data object are linked by reference</p>