title: Got ExpressionChangedAfterItHasBeenCheckedError when using *ngFor and ContentChildren
body: <p>I have tabs and tab components:</p>
  
  <p>tabs.component.ts:</p>
  
  <pre><code>@Component({
      selector: 'cl-tabs',
      template: `&lt;ng-content&gt;&lt;/ng-content&gt;`,
      styleUrls: ['tabs.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class TabsComponent implements AfterContentInit {
      @ContentChildren(TabComponent) tabs: QueryList&lt;TabComponent&gt;;
  
      ngAfterContentInit(): void {
          if (0 &lt; this.tabs.length) {
              this.activate(this.tabs.first);
          }
      }
  
      activate(activatedTab: TabComponent) {
          this.tabs.forEach(tab =&gt; tab.active = false);
          activatedTab.active = true;
      }
  }
  </code></pre>
  
  <p>tab.component.ts:</p>
  
  <pre><code>@Component({
      selector: 'cl-tab',
      template: `&lt;ng-content&gt;&lt;/ng-content&gt;`,
      styleUrls: ['tab.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class TabComponent {
      @Input() title: string;
      @Input() @HostBinding('class.is-active') active: boolean = false;
  }
  </code></pre>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;cl-tabs&gt;
      &lt;cl-tab *ngFor="let item of items" [title]="item.name"&gt;
          &lt;any-component [item]="item"&gt;&lt;/any-component&gt;
      &lt;/cl-tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>When tabs are created using *ngFor an ExpressionChangedAfterItHasBeenCheckedError is thrown. </p>
  
  <p>cdRef.detectChanges(), as suggested in many cases, doesn't help.</p>
  
  <p>Error dissapears if:</p>
  
  <ul>
  <li>tabs are created statically; or</li>
  <li>HostBinding is removed from "active" field; or</li>
  <li>setTimeout is applied to ngAfterContentInit.</li>
  </ul>
  
  <p>Why does the error dissapear in the first two cases?
  Is there any better alternative to setTimeout in that particular case?</p>
  
  <p><strong>UPDATE:</strong> Reproduced the error in plunker <a href="https://embed.plnkr.co/ZUOvf6NXCj2JOLTwbsYU/" rel="nofollow noreferrer">https://embed.plnkr.co/ZUOvf6NXCj2JOLTwbsYU/</a></p>