Angular 2 - when *ngFor completes call function on parent component
<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>