title: Angular ng-container inside a HTML table row
body: <p>I have a Reactive Form with FormArray (like an Game Roster with basic information like Start At, Prize, Duration and also with a Roster (array of players)</p>
  
  <p>I display array of players like this:</p>
  
  <pre><code>&lt;input 
      class="form-control" 
      formControlName="prize"
      type="number"
  /&gt;
  
  &lt;table&gt;
   &lt;tr 
     *ngFor="let player of form.players" 
     [form]="player"
     appPlayer 
   &gt;
   &lt;/tr&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>And custom component</p>
  
  <pre><code>@Component({
    selector: 'tr[appPlayer]',
    templateUrl: './player.component.html',
    changeDetection: ChangeDetectionStrategy.Default,
    providers: [
      ReceiptItemReactiveService
    ]
  })
  export class AppPlayerRow {
    @Input()
    player: FormGroup;
  ...
  </code></pre>
  
  <p>So far so good. Inside AppPlayerRow I need display cells, indeed. Though, they must be wrapped inside an element with [FormGroup] directive. As far as I know HTML5 allows only td/th element inside TR. So I did it with this workaround:</p>
  
  <p>player.component.html:</p>
  
  <pre><code>&lt;ng-container [formGroup]="player" &gt;
      &lt;td class="order" &gt;
          {{ plater.controls.order?.value }}
      &lt;/td&gt;
  
      &lt;td class="desc" &gt;
          &lt;input 
              class="form-control" 
              formControlName="name"
          /&gt;
     ....
  </code></pre>
  
  <p>In browser all is rednered good, ng-container is not rendered, everything seems to be valid. I am just trying to confirm if I am not missing some caveat.</p>
  
  <p>Thansk!</p>