ng-template and ng-container
Define and host template fragments.
ng-template and ng-container is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Templates That Do Not Render
<ng-template> defines a chunk of markup that is not rendered until something explicitly instantiates it. It is the foundation of structural directives like *ngIf.
Defining a Template
Content inside <ng-template> stays inert. You give it a reference variable to use it elsewhere.
<ng-template #empty>
<p>No items found.</p>
</ng-template>Rendering with ngTemplateOutlet
Use ngTemplateOutlet to render a template by reference.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>Why ng-container?
<ng-container> is a logical, non-DOM grouping element. It lets you apply directives or group nodes without adding an extra wrapper element to the DOM.
Avoiding Wrapper Divs
Without ng-container you might add a useless <div> just to host a directive. ng-container disappears from the rendered output.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>Grouping Control Flow
ng-container is great for wrapping new control-flow blocks without adding DOM.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>Template Context
Templates can receive a context object, exposing values via let- variables.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>Default Context Value
The special $implicit context value binds to a let- variable with no assigned key.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>Templates Are First-Class
A #ref on an <ng-template> is a TemplateRef. You can pass it as an @Input so a component lets consumers customize parts of its UI.
emptyTemplate = input<TemplateRef<unknown>>();ng-container as a Host
ng-container is also handy as an outlet host for dynamic components or templates, keeping the DOM clean.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>When to Use Which
ng-template: deferred/reusable markup. ng-container: grouping and hosting directives without extra DOM. They often work together.
Quick Check
Test your understanding of ng-template and ng-container.
Recap
You learned that <ng-template> holds inert, instantiable markup rendered via ngTemplateOutlet (with optional context), and <ng-container> groups nodes or hosts directives without adding DOM.
Frequently asked questions
Is the “ng-template and ng-container” lesson free?
Yes — the full text of “ng-template and ng-container” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “ng-template and ng-container”?
Define and host template fragments. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “ng-template and ng-container” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Single-Slot Content Projection
- Multi-Slot Projection with select
- ng-template and ng-container
- TemplateRef and ViewContainerRef