title: Angular 2 append Component dynamic to DOM or template
body: <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>