title: Angular 2 - when *ngFor completes call function on parent component
body: <p>I am trying to create a carousel component for my Angular 2 application.</p>
  
  <p>I want the carousel to be generic, so that it will support both these cases:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;myCarousel&gt;
    &lt;div&gt;first card&lt;/div&gt;
    &lt;div&gt;second card&lt;/div&gt;
    ....
  &lt;/myCarousel&gt;
  </code></pre>
  
  <p>and the more generic</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;myCarousel&gt;
    &lt;myCard *ngFor="let card of cards" [card]="card"&gt;&lt;/myCard&gt;
  &lt;/myCarousel&gt;
  </code></pre>
  
  <p>The problem is that the carousel component requires an initialisation to run <em>after</em> the *ngFor has completed, otherwise it won't be displayed correctly. </p>
  
  <p>Since the data is coming from a web service call, I can't guess the exact timing, but I need the carousel component to observe, implicitly or explicitly, when *ngFor has completed. Can anybody help? Thank you!</p>