How do I dynamically remove and add back component in angular2?
<p>I have a component defined "FancyButton". I have it here in the template:</p>

<pre><code>...
&lt;div class="container"&gt;
  &lt;div class="fancy"&gt;
    &lt;fancybutton&gt;&lt;/fancybutton&gt;
  &lt;/div&gt;
  &lt;button (click)="removeFancyButton"&gt;Remove&lt;/button&gt;
  &lt;button (click)="addFancyButton"&gt;Add&lt;/button&gt;
&lt;/div&gt;
...
</code></pre>

<p>My question is, How can I programatically remove:</p>

<pre><code>  &lt;div class="fancy"&gt;
    &lt;fancybutton&gt;&lt;/fancybutton&gt;
  &lt;/div&gt;
</code></pre>

<p>When I click on the remove button? Conversely, how do I add it back in? I would like it to trigger ngOnDestroy if possible, and if its "re-added", trigger ngOnInit when added back in.</p>

<p>This is my fancy-button component, below is the parent template that i have the fancy-button integrated in within the home.component.html:</p>

<pre><code>@Component({
  selector: 'fancy-button',
  template: `&lt;button&gt;clickme&lt;/button&gt;`
})
export class FancyButton {}

@Component({
  selector: 'home',  // &lt;home&gt;&lt;/home&gt;
  providers: [
    Title
  ],
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})
</code></pre>