title: How to dynamically add a directive?
body: <p>How to dynamically add (<strike>inject</strike>) a directive into host?</p>
  
  <p>I have a myTooltip directive and I would like to add mdTooltip directive to it's host. I have tried <code>setAttribute()</code> of <code>ElementRef.nativeElement</code>, but it doesn't create the mdTooltip directive.</p>
  
  <p>mytooltip.directive.ts:</p>
  
  <pre><code>@Directive({
    selector: '[my-tooltip]',
    host: {
      '(mouseenter)': 'show()',
      '(mouseleave)': 'hide()',
    }
  })
  export class myTooltip {
    @Input('my-tooltip') message;
  
    constructor() { }
  
    show() {
      /* TODO: How to add md-tooltip directive to elementref (host)? */
    }
  
    hide() {
      /* TODO: remove md-tooltip directive from elementref (host) */
    }
  }
  </code></pre>
  
  <p>By host I mean the element that has myTooltip directive:</p>
  
  <pre><code>&lt;span my-tooltip="tooltip hint"&gt;Click here&lt;/span&gt;
  </code></pre>
  
  <p><strong>The result</strong> wouldn't change above html but on mouseenter it would have md-tooltip directive in span.</p>
  
  <p>BTW, the reason I am using a wrapper and not directly md-tooltip is that I want to later modify the showing delay, hiding delay and customize material tooltip's behaviour in other means as well.  </p>
  
  <p><strong>Edit</strong> Apparently adding directives dynamically is not currently supported :( I think this question should still be here in case it material team updates that</p>