title: Dynamically mount angular 2 directive
body: <h2>Context</h2>
  
  <p>I have a simple directive that add some attributes to a given HTML element based on received attributes.</p>
  
  <pre><code>&lt;button class="btn btn-blue x-large" [myDirective]="{ some_json_data: true }"&gt;
      Unfold
  &lt;/button&gt;
  </code></pre>
  
  <p>The <code>myDirective</code> directive just does some logic in the <code>ngOnInit</code> hook and decorates the <code>ElementRef</code> native element (in this case the button) adding attributes, nothing complicated.</p>
  
  <pre class="lang-typsecript prettyprint-override"><code>ngOnInit(): void {
    const el: Element = this.element.nativeElement;
    this.decorate(el, this.myDirective);
  }
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>Based on a given logic (in <code>myDirective</code> decoration) I want to add a tooltip (which is another directive) to the element referenced by <code>ElementRef</code> at <code>myDirective</code>.</p>
  
  <p><strong>How do I mount a directive manually and how do I add it to an element (ViewContainerRef)?</strong></p>