title: Use a template-free tag to host a Recursive Component in Angular
body: <p>I created an recursive component <em><strong>my-row</strong></em> in Angular, it means that it calls itself many times for each level of my tree data structure,</p>
  <p>The template of the component <em><strong>my-row</strong></em>:</p>
  <pre><code>&lt;ng-container [pReorderableRow]=&quot;rowIndex&quot; *ngIf=&quot;level === this.groupingLevels.length else child_row&quot;&gt;
      &lt;tr&gt;
         &lt;td [attr.rowspan]=&quot;rowGroupMetaData.indexes.length&quot;&gt; 
             {{rowGroupMetaData.source[col]}}
         &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/ng-container&gt;
  
  
  &lt;ng-template #child_row&gt;
    &lt;my-row  *ngFor=&quot;let metaKey of getKeys(); index as i;&quot;
            [rowGroupMetaData]=&quot;rowGroupMetaData.children[metaKey]&quot;
    &gt;
    &lt;/my-row&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>And I called it inside my table's body as follow:</p>
  <pre><code>&lt;p-table
      [value]=&quot;[{}]&quot;
      [columns]=&quot;cols&quot;
      [reorderableColumns]=&quot;true&quot;
      (onColReorder)=&quot;onColReorder($event)&quot;
    &gt;
      &lt;ng-template pTemplate=&quot;header&quot; let-columns&gt;
        &lt;tr&gt;
          &lt;th&gt;
            {{col}}
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/ng-template&gt;
      &lt;ng-template pTemplate=&quot;body&quot; let-rowIndex=&quot;rowIndex&quot; let-columns&gt;
        &lt;my-row *ngFor=&quot;let metaKey of getKeys(rowGroupMetadata)&quot;
                    [rowGroupMetaData]=&quot;rowGroupMetadata[metaKey]&quot;&gt;&lt;/my-row&gt;
      &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>
  <p>The problem is that I must not put any tag between the tbody and it's tr otherway it will not appear, but I can use <strong>ng-container</strong> or <strong>ng-template</strong> between them because they don't affect the structure.</p>
  <p>After discovering that I tried to host my component as a directive inside an <strong>ng-container</strong> / <strong>ng-template</strong>:</p>
  <pre><code>&lt;ng-container my-row
                    *ngFor=&quot;let metaKey of getKeys(rowGroupMetadata)&quot;
                    [rowGroupMetaData]=&quot;rowGroupMetadata[metaKey]&quot;
  &gt;&lt;/ng-container&gt;
  </code></pre>
  <p>But unfortunately I have the error that says that <strong>ng-container</strong> is not used as host, neither <strong>ng-template</strong>.</p>
  <p>Can you give some other potential components that I can use for hosting or another solution please.</p>