title: Wait for Angular2 to render following property change
body: <p>I'm currently developing an Angular2 application and am facing an issue regarding property changes and life cycle events.</p>
  
  <h1>Example</h1>
  
  <p>Let's say that I have a simple template that is being rendered based on a property. I would like <code>#container</code> to stay hidden until the rendering is done, then add the <code>visible</code> class to it to have it show up.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;p *ngFor="let value in values"&gt;
          {{value}}
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>The problem</h1>
  
  <p>The problem is that <code>.visible</code> defines a transition, too, and the browser simply cannot handle Angular's rendering and the transition at the same time, so it quite simply stops for a moment, and then the <code>#container</code> just snaps in.</p>
  
  <h1>What I have tried</h1>
  
  <p>Setting a long enough time for the transition solves the problem, but I wouldn't want to change that.</p>
  
  <p>I have also looked into <a href="https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html" rel="nofollow">Angular's life cycle</a> hooks, but none of them seems to match my specific need. </p>
  
  <h1>Goals</h1>
  
  <p>I would like to be notified once Angular has finished rendering the contents of <code>#container</code>, so that I can add the <code>visible</code> class while no other work is being done, and have a smooth transition.</p>
  
  <p>Any and all help is greatly appreciated.</p>