title: Destroying and reloading a child component
body: <p>I need to be able to completely reload a child component. It seems the best way to to acheive this is by using a simple <code>*ngIf</code> with a boolean value; Set false to remove the component, and then set to true to re-initialize it, ie:</p>
  
  <pre><code>&lt;app-child *ngIf="enabled"&gt;&lt;/app-child&gt;
  </code></pre>
  
  <p>However, it seems that just doing this isn't enough to quickly remove/reinitialize the component:</p>
  
  <pre><code>reloadTree(){
    this.enabled = false;
    this.enabled = true; // doesn't work- child ngOnInit isn't called
  }
  </code></pre>
  
  <p>Rather, I have to use a <code>setTimeout</code> before it will work:</p>
  
  <pre><code>reloadTree(){
    this.enabled = false;
    const self = this;
    setTimeout(function(){
      self.enabled = true;
    }, 1);
  }
  </code></pre>
  
  <p>I presume this is to do with the way Angular renders templates? This isn't paricularly elegant- can anyone suggest a better way to acheive what I'm trying to do here? Thanks</p>