title: How to prevent calling constructor of component in ngFor directive
body: <p>Can I have components inside ngFor directive, in such a way, that component's constructor doesn't have to be called every time, when data changes?</p>
  
  <p>Plunker example: <a href="http://plnkr.co/edit/6A6Aj8yeFqNd28Nl8cyS?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/6A6Aj8yeFqNd28Nl8cyS?p=preview</a></p>
  
  <p>I just want to update data, not re-create component. Open console to see better what I mean.</p>
  
  <p>AppComponent:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;div *ngFor="let value of sourceData"&gt;
          &lt;fizz [sampleInputValue]="value"&gt;&lt;/fizz&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
  
    sourceData: number[] = [];
  
    ngOnInit() {
      setInterval(() =&gt; {
        let newArrayOfRandomNumbers: number[] = [
          Math.floor(Math.random() * 60) + 1,
          Math.floor(Math.random() * 60) + 1,
          Math.floor(Math.random() * 60) + 1,
          Math.floor(Math.random() * 60) + 1,
          Math.floor(Math.random() * 60) + 1
        ]
  
        newArrayOfRandomNumbers.forEach((randomNumber, index) =&gt; {
          this.sourceData[index]= newArrayOfRandomNumbers[index];
        });
      }, 500);
    }
  }
  </code></pre>
  
  <p>FizzComponent:</p>
  
  <pre><code>@Component({
    selector: 'fizz',
    template: `
      {{sampleInputValue}}  
    `
  })
  export class FizzComponent {
  
    @Input()sampleInputValue: number;
  
    constructor() {
      console.log("I dont want to be called, I just want the data to be updated")
    }
  }
  </code></pre>