Angular ng-container inside a HTML table row

Question

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)

I display array of players like this:

<input 
    class="form-control" 
    formControlName="prize"
    type="number"
/>

<table>
 <tr 
   *ngFor="let player of form.players" 
   [form]="player"
   appPlayer 
 >
 </tr>
<table>

And custom component

@Component({
  selector: 'tr[appPlayer]',
  templateUrl: './player.component.html',
  changeDetection: ChangeDetectionStrategy.Default,
  providers: [
    ReceiptItemReactiveService
  ]
})
export class AppPlayerRow {
  @Input()
  player: FormGroup;
...

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:

player.component.html:

<ng-container [formGroup]="player" >
    <td class="order" >
        {{ plater.controls.order?.value }}
    </td>

    <td class="desc" >
        <input 
            class="form-control" 
            formControlName="name"
        />
   ....

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.

Thansk!

Answer 1

It is totally okay to use the <ng-container> , however, the container just helps you to increase the context in which you use Angular directives. More like you could have a *ngFor directive in the outer context and still use *ngIf in the looped *ngFor by using the ng-container to group elements when there is no suitable host element for the directive. Refer to the Angular Guide .