Directives, Pipes & Templates
Angular ng-template and ng-container
ng-template defines a chunk of markup that is not rendered until something instantiates it. ng-container is an invisible grouping element that lets you apply a directive without adding a wrapper to the DOM.
What is ng-template and ng-container in Angular?
ng-template defines a chunk of markup that is not rendered until something instantiates it. ng-container is an invisible grouping element that lets you apply a directive without adding a wrapper to the DOM.
ng-template and ng-container example
HTML
<!-- ng-container: apply two structural directives without a wrapper div -->
<ng-container *ngIf="jobs">
<li *ngFor="let job of jobs">{{ job.title }}</li>
</ng-container>
<!-- ng-template: rendered only when referenced -->
<div *ngIf="loaded; else loadingTpl">…</div>
<ng-template #loadingTpl>
<app-skeleton />
</ng-template>Key points to remember
- ng-container renders nothing itself — it exists only to host directives.
- ng-template content is inert until a directive or ngTemplateOutlet renders it.
- Passing a TemplateRef as an @Input is how reusable components let callers supply markup.
Common mistakes with ng-template and ng-container
- Expecting ng-template content to show without something rendering it.
- Adding a wrapper div for a structural directive and breaking a flex or grid layout.
Angular ng-template and ng-container— Interview Questions & FAQs
What is the difference between ng-container and ng-template?+
ng-container renders its children immediately but adds no DOM element of its own. ng-template does not render at all until a directive instantiates it.