title: Using dynamic component within Angular structural directive produces extra HTML tag. How to remove or replace it?
body: <p>I have quite complex infrastructure in my project which contains of</p>
  
  <ul>
  <li>host component</li>
  <li>structural directive used in host component's template (MyDir)</li>
  <li>another component used in structural directive (MyComp)</li>
  </ul>
  
  <p>Simplified version looks like the following.</p>
  
  <p><strong>host component</strong></p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
  &lt;table&gt;
    &lt;tr *myDir="let item of data"&gt;
      &lt;td&gt;{{item.text}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;`
  })
  export class AppComponent  {
    data = [ { text: 'item 1' }, { text: 'item 2' } ];
  }
  </code></pre>
  
  <p><strong>structural directive</strong></p>
  
  <pre><code>import { MyComp } from './myComp';
  
  @Directive({ selector: '[myDir][myDirOf]' })
  export class MyDir implements OnInit {
    private data: any;
  
    constructor(
      private templateRef: TemplateRef&lt;any&gt;,
      private viewContainer: ViewContainerRef,
      private resolver: ComponentFactoryResolver
    ) {
    }
  
    @Input() set myDirOf(data: any) {
      this.data = data;
    }
  
    ngOnInit() {
      const templateView = this.templateRef.createEmbeddedView({});
      const compFactory = this.resolver.resolveComponentFactory(MyComp);
      const componentRef = this.viewContainer.createComponent(
        compFactory, undefined, this.viewContainer.injector, [templateView.rootNodes]
      );
      componentRef.instance.data = this.data;
      componentRef.instance.template = this.templateRef;
    }
  }
  </code></pre>
  
  <p><strong>structural directive's component</strong></p>
  
  <pre><code>@Component({
    selector: '[my-comp]',
    template: `
  &lt;tr&gt;&lt;td&gt;custom td&lt;/td&gt;&lt;/tr&gt;
  &lt;ng-template *ngFor="let item of data"
    [ngTemplateOutlet]="template"
    [ngTemplateOutletContext]="{ $implicit: item }"
  &gt;&lt;/ng-template&gt;`
  })
  export class MyComp {
    public template: TemplateRef&lt;any&gt;;
    public data: any;
  }
  </code></pre>
  
  <p>The output is </p>
  
  <blockquote>
    <p>custom td <br>
    item 1 <br>
    item 2</p>
  </blockquote>
  
  <p>which is fine except the markup which is</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;div my-comp&gt;
      &lt;tr&gt;&lt;td&gt;custom td&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 1&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;item 2&lt;/td&gt;&lt;/tr&gt;
    &lt;/div&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>I want to remove intermediate <code>&lt;div my-comp&gt;</code> from the result view or at least replace it with <code>&lt;tbody&gt;</code>. To see the whole picture I prepared <a href="https://stackblitz.com/edit/angular-structural-dir-with-comp-table" rel="nofollow noreferrer">Stackblitz DEMO</a>, hope it will help... Also, it might be obvious the example is artificial, but this is what I came with trying to reproduce the issue with minimal code. So the problem should have a solution in the given infrastructure. </p>
  
  <p><strong>Update</strong></p>
  
  <p>@AlexG found simple way to replace intermediate <code>div</code> with <code>tbody</code> and stackblitz demo showed a good result at first. But when I tried to apply it to my project locally I faced new issue: browser arranges its own <code>tbody</code> before the dynamic contents of the table are ready to render, which results in two nested <code>tbody</code> in the end view, which seems inconsistent per html specs</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tbody&gt;
        &lt;tbody my-comp&gt;
          &lt;tr&gt;&lt;td&gt;custom td&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;item 1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;item 2&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Stackblitz demo has no such problem, only <code>tbody my-comp</code> is present. But exactly the same project in my local dev environment does. So I'm  still trying to find a way how to <strong>remove</strong> intermediate <code>my-comp</code> container.</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>The <a href="https://stackblitz.com/edit/angular-structural-dir-with-comp-table" rel="nofollow noreferrer">demo</a> had been updated in accordance with the solution suggested by @markdBC.</p>