title: What is the correct way of using *ngFor with an iterator?
body: <p>TL;DR:<br>
  Angular raises <code>ExpressionChangedAfterItHasBeenCheckedError</code> when using an iterator with <code>ngFor</code>.</p>
  
  <hr>
  
  <p>I have a template which uses <code>ngFor</code> like:</p>
  
  <pre><code>&lt;div *ngFor="let something of foobarIterator()"&gt;
  </code></pre>
  
  <p>The TypeScript code being like:</p>
  
  <pre><code>private foobar = [];
  
  public foobarIterator() {
      return this.foobar[Symbol.iterator]();
  }
  </code></pre>
  
  <p>According to Angular documentation it is allowed to pass an iterator to <a href="https://angular.io/api/common/NgForOf#ngForOf" rel="nofollow noreferrer"><em>ngForOf</em></a> and it actually works&hellip; except it throws an <code>ExpressionChangedAfterItHasBeenCheckedError</code> afterwards.</p>
  
  <p>While I understand that it may be because I return a new instance of iterator every time the method is called, I do not get what Angular expects instead. Using the same instance of the iterator after it has been exhausted makes no sense &ndash; it's an iterator after all, not the array itself.</p>
  
  <p>What is the correct way of using iterators with <code>ngFor</code> then?</p>