title: Angular structural directive and Renderer2
body: <p>I have a custom checkbox directive that adds styling in the traditional label/span style as well as some other functionality.  It injects the wrapper around itself and the span alongside.  I just realized that when placed in a structural directive it fails to manipulate the DOM.  Most of the setup is done in the constructor, but I'm thinking that maybe this needs to be more Angular life-cycle-aware to play well with structural parents.</p>
  
  <p>Example issue DOM:</p>
  
  <pre><code>  &lt;ng-container *ngIf="test"&gt;
      &lt;!-- &lt;div class="row align-middle"&gt; --&gt;
        &lt;input type="text" alloy placeholder="you should see a checkbox"&gt;
        &lt;input type="checkbox" alloy alloyLabel="default"&gt;
      &lt;!-- &lt;/div&gt; --&gt;
    &lt;/ng-container&gt;
  </code></pre>
  
  <p>With that commented div it works.  However, with the ng-container as it's direct parent the renderer fails to inject the DOM.  This is the constructor:</p>
  
  <pre><code>constructor(
      protected el: ElementRef,
      protected renderer: Renderer2,
      protected focusMonitor: FocusMonitor,
      @Host() @Optional() protected identityDirective: AlloyIdentityDirective) {
      super();
  
      // If we don't have a label wrapper, create one
      this.labelElement = this.renderer.parentNode(el.nativeElement);
      if (!(this.labelElement instanceof HTMLLabelElement)) {
          const label = this.renderer.createElement('label');
  
          // Inject wrapper then move native element (input) within it.
          this.renderer.insertBefore(this.labelElement, label, this.el.nativeElement);
          this.renderer.removeChild(this.labelElement, this.el.nativeElement);
          this.renderer.appendChild(label, this.el.nativeElement);
          this.labelElement = label;
  
      // We must add the span because that's what actually gets the check styling
      this.styledElement = this.renderer.createElement('span');
      this.renderer.appendChild(this.labelElement, this.styledElement);
  }
  </code></pre>
  
  <h2>Edit: Added Resultant DOM</h2>
  
  <p>There is no actual error.  In the flawed case (direct parent of <code>ng-container</code>) I end up with the initial element, but no injections:
  <code>&lt;input type="checkbox" alloy alloyLabel="default"&gt;</code></p>
  
  <p>With the wrapper <code>div</code> I get the expected injections (_ngcontent* removed):</p>
  
  <pre><code>&lt;label class="alloy-check-wrapper"&gt;
    &lt;input alloy="" alloylabel="default" type="checkbox" class="alloy-check"&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span class="alloyLabel"&gt;default&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>