Angular 2 append Component dynamic to DOM or template
<p>I'm planning to add a component dynamic to the DOM if show() is called.
I know there is a solution with ngIf or [hidden] to hide it and use it as a directive, but I'm not a fan of this solution because I don't want to declare it in my HTML.  </p>

<pre><code>  import {Component} from 'angular2/core';
  import {InfoData} from '../../model/InfoData';

  @Component({
    selector: 'Info',
    templateUrl: './components/pipes&amp;parts/info.html',
    styleUrls: ['./components/pipes&amp;parts/info.css']
  })

  export class Info{
    infoData: InfoData;

    public show(infoData: InfoData) {
      this.infoData= infoData;
      document.body.appendChild(elemDiv); &lt;----- Here?
    }
  }
</code></pre>

<p>and then I declare this as a Provider so i can call show().</p>

<pre><code>  import {Component} from 'angular2/core';
  import {Info} from './components/pipes&amp;parts/Info';

  @Component({
    selector: 'Admin',
    templateUrl: './Admin.html',
    styleUrls: ['./Admin.css'],
    directives: [Info],
    providers: [Info]
  })

  export class Admin {
    constructor(private info: Info) {
    info.show(); &lt;---- append the Info Element to DOM
  }
</code></pre>