title: Adding a Component to a TemplateRef using a structural Directive
body: <p>We are building an angular 4 component library and one of the components is a Busy component. The purpose of the component is to allow a developer to create an overlay on any given HTML element which contains a spinner graphic.</p>
  <pre><code>&lt;div *xuiBusy=&quot;isBusy&quot;&gt;...&lt;/div&gt;
  </code></pre>
  <p>When the value of <code>isBusy</code> is true we want to append to the inner content of the <code>div</code> so that we can present the overlay elements on top of the content.</p>
  <p>We have been able to append the component to the <code>ViewContainerRef</code> however this inserts the busy element as a sibling to the <code>div</code> rather than within the <code>div</code> as desired.</p>
  <pre><code>    ngOnInit(): void {
        const compFactory = this._componentFactory.resolveComponentFactory(XuiBusyComponent);
        const comp = this._viewContainer.createComponent(compFactory);
        
  </code></pre>
  <p>What the consumer does:</p>
  <pre><code>&lt;div *xuiBusy=&quot;isBusy&quot;&gt;
    &lt;span&gt;This is the content&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>When <code>isBusy</code> is set to true we want to alter the markup to look something like this. Notice that <code>&lt;spinner&gt;</code> has been added to the <code>div</code> element.</p>
  <pre><code>&lt;div *xuiBusy=&quot;isBusy&quot;&gt;
    &lt;span&gt;This is the content&lt;/span&gt;
    &lt;spinner&gt;Please wait...&lt;/spinner&gt; &lt;-- inserted by directive
  &lt;/div&gt;
  </code></pre>
  <p>Any advice is appreciated!</p>