<ng-container>

{{hero.name}}

<ng-container> and CSS

Examples demonstrating issues with rigid CSS styles.

#1 <ng-container> and <p>

I turned the corner and saw {{hero.name}}. I waved and continued on my way.

I turned the corner and saw {{hero.name}}. I waved and continued on my way.

#2 <ng-container> and <p>

{{hero.name}} is , and {{trait}} .

{{hero.name}} is , and {{trait}} .


#3 <ng-container> and <p>

The hero.id in the <span> is caught by the p-span CSS:

Id: ({{hero.id}}) Name: {{hero.name}}

The hero.id in the <ng-container> is unaffected by the p-span CSS:

Id: ({{hero.id}}) Name: {{hero.name}}

The hero.id in the <template *ngIf> disappears:

Name: {{hero.name}}

The hero.id in the <template [ngIf]> is unaffected by the p-span CSS:

Name: {{hero.name}}

<ng-container> and layout-sensitive elements

Examples demonstrating issues with layout-sensitive elements such as <select> and <table>.

#1 <ng-container> and <options>

<select> with <span>

Pick your favorite hero ()

<select> with <ng-container>

Pick your favorite hero ()




#2 <ng-container> and <options>

Options with <ng-container>

Options with <span>


<ng-container> and <table>
Directive Type Description
NgClassAAdd or remove multiple CSS classes.
xxxSdiv with *ngIf formats crazy.
yyySdiv with *ngIf formats crazy.
NgForSRepeat the template for each item in a list.
NgIfSAdd or remove DOM elements.
NgStyleAAdd or remove multiple style attributes.
NgSwitchSInclude in DOM if case matches the switch value.

Do not confuse <ng-container> with <ng-content>

<ng-container>Inside ng-container</ng-container>

Inside ng-container

<ng-content>this is an Angular parse error</ng-content>

Template parse errors:
<ng-content> element cannot have content.

Demo of </ng-content>

Projected content