Ng-template vs ng-container vs ng-content in Angular: Key Differences

ng-template defines a reusable template that is not rendered directly but can be instantiated elsewhere. ng-container groups elements without adding extra DOM nodes, useful for structural directives. ng-content is a placeholder for projecting external content into a component's template.

Quick Comparison

This table summarizes the main differences between ng-template, ng-container, and ng-content in Angular.

Feature	ng-template	ng-container	ng-content
Purpose	Defines a template to be rendered later	Groups elements without extra DOM	Projects external content into component
Rendered in DOM?	No, unless instantiated	No, acts as invisible wrapper	Yes, renders projected content
Use case	Reusable templates, structural directives	Avoid extra wrappers in DOM	Content projection in components
Can contain other elements?	Yes, any template content	Yes, any elements	No, only projects passed content
Typical usage	<ng-template> with *ngIf, *ngFor	<ng-container> to group without div	<ng-content> inside component templates

Key Differences

ng-template is a way to define a chunk of HTML that Angular does not render immediately. Instead, it stores this template to be used later, often with structural directives like *ngIf or *ngFor. It acts like a blueprint that Angular can stamp out multiple times or conditionally.

ng-container is an invisible wrapper that groups elements without adding extra tags to the DOM. This is helpful when you want to apply directives or group elements logically but avoid cluttering the HTML with unnecessary <div> or other tags.

ng-content is used inside a component to mark where external content (passed from the parent component) should appear. It enables content projection, letting you create flexible components that can display different content inside predefined slots.

Code Comparison

html

<!-- Using ng-template with *ngIf -->
<div *ngIf="show; else elseBlock">Content is shown</div>
<ng-template #elseBlock>
  <div>Content is hidden</div>
</ng-template>

Output

If show is true: <div>Content is shown</div>
If show is false: <div>Content is hidden</div>

ng-container Equivalent

html

<!-- Using ng-container to group without extra div -->
<ng-container *ngIf="show">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</ng-container>

Output

If show is true: <p>Paragraph 1</p><p>Paragraph 2</p>
If show is false: (nothing rendered)

When to Use Which

Choose ng-template when you want to define reusable or conditional templates that Angular can render later, especially with structural directives.

Choose ng-container when you need to group multiple elements logically without adding extra HTML tags to the DOM, often to apply directives cleanly.

Choose ng-content when building components that accept and display external content from their parent, enabling flexible content projection.

Key Takeaways

ng-template defines templates for conditional or repeated rendering but does not render itself.

ng-container groups elements without adding extra DOM nodes, useful for clean markup.

ng-content projects external content into component templates for flexible layouts.

Use ng-template with structural directives like *ngIf or *ngFor.

Use ng-content inside components to accept and display content from parents.