Angular 2 - with ngFor, is it possible to update values without rebuilding the dom? : <p>I have a component 'bar' inside ngFor. I want to update its width with animation starting from the previous value to new one. </p>

<p>html : </p>

<pre><code>&lt;div *ngFor="let station of stations" class="station"&gt;
    &lt;bar [perc]="station.perc" class="bar"&gt;&lt;/bar&gt;
&lt;/div&gt;
</code></pre>

<p>ParentComponent : </p>

<pre><code>ngOnInit(){
    setInterval(() =&gt; this.updateData(), 10000);
  }

  updateData(){
    const url = 'http://....';
    this.http.get(url)
      .map(res =&gt; res.json())
      .subscribe(data =&gt; {

        this.stations = data;

      });
  }
</code></pre>

<p>BarComponent</p>

<pre><code>export class BarComponent {

  @Input() perc;

  constructor(private element: ElementRef){}

  ngOnChanges(changes: any): void {
    let perc = changes.perc.currentValue;
    TweenMax.to(this.element.nativeElement, 1, { width: perc + '%' });
  }

}
</code></pre>

<p>But on each updateData() it looks like ngFor recreates the dom and BarComponent is constructed again. So even if 'station.perc' is the same,  ngOnChanges() is fired.</p>

<p>And the transition keeps on restarting from 0 instead of starting from the previous value...</p>

<p>I probably miss a crucial point here but whats the clean workaround?</p>
