`<ng-container>`

A grouping element that renders no DOM, useful for structural logic.

Since Angular 4+ Spec ↗

Syntax

<ng-container>...</ng-container>

Returns

template element — Groups children without adding a wrapper element.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  template: `
    <ng-container *ngTemplateOutlet="tpl"></ng-container>
    <ng-template #tpl>
      <td>A</td><td>B</td>
    </ng-template>
  `,
})
export class XComponent {}

Notes

`<ng-container>` produces no element in the DOM, so it is ideal for applying a structural directive or ngTemplateOutlet without breaking layouts like tables or flex/grid. With the new `@if`/`@for` blocks it is needed less often but still handy for directive hosting.