ng-template & ng container in angular
What is ng-template?
ng-template is an Angular directive that specifies a template block not to be rendered by the browser by default. Instead, it is treated as a blueprint for making dynamic places: when combined with structural directives such as *ngIf, *ngFor, or your own, one of the above might as well be called a register. Here is a way to save.
Characteristics
- Not Rendered at the Beginning: It's as if everything inside ng-template were dull, waiting for approval.
- Collaborates with Structural Directives: Used to mark content which depends on something like a condition you may want to show a larger view of or data that is supposed to not just go away.
- Takes Contextual Information: Lets you pass data to templates for dynamic rendering.
Basic Usage of ng-template
Example 1: Conditional Rendering with *ngIf and else
This is a common use case where alternate content is shown when a particular condition isn’t true:
<div *ngIf="userLoggedIn; else loginPrompt">
Welcome, {{ username }}!
</div>
<ng-template #loginPrompt>
<p>Please log in.</p>
</ng-template>
Here:
- The else clause calls the loginPrompt template.
- The loginPrompt template only gets rendered when userLoggedInis false.
How It Works:
Angular converts the *ngIf syntax into:
<ng-template [ngIf]="userLoggedIn">
<div>Welcome, {{ username }}!</div>
</ng-template>
The #loginPrompt is a template reference variable pointing to the ng-template.
The Role of Structural Directives
Structural directives (e.g., *ngIf, *ngFor) manipulate the DOM by adding or removing elements. As it turns out, they use ng-template to define the content they manage.
Example 2: How *ngFor Uses ng-template
This code:
<ul>
<li *ngFor="let item of items; let i = index">{{ i }}: {{ item }}</li>
</ul>
Turns into this thanks to Angular:
<ul>
<ng-template ngFor let-item [ngForOf]="items" let-i="index">
<li>{{ i }}: {{ item }}</li>
</ng-template>
</ul>
The contents of ng-template provide the structure that gets repeated for each item in items .
Advanced Use Cases
1. Dynamic Templates with ngTemplateOutlet
Use ngTemplateOutlet to render a template dynamically, optionally with context data:
@Component({
template: `
<ng-container *ngTemplateOutlet="greetingTemplate; context: { $implicit: 'User' }">
</ng-container>
<ng-template #greetingTemplate let-message>
Welcome, {{ message }}!
</ng-template>
`
})
Here:
- ngTemplateOutlet displays greetingTemplate, together with context information.
- let-message gets the context's $implicit value.
2. Custom Structural Directives
Create reusable directives that leverage ng-template:
@Directive({
selector: '[appRepeat]'
})
export class RepeatDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {}
@Input() set appRepeat(times: number) {
this.viewContainer.clear();
for (let i = 0; i < times; i++) {
this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: i + 1 });
}
}
}
Usage:
<ul>
<li *appRepeat="3">Item {{ count }}</li>
</ul>
Output:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Pass templates to components as inputs for flexible content projection.
Parent Component:
<app-card>
<ng-template #header>My Custom Header</ng-template>
<ng-template #body>Body: {{ data }}</ng-template>
</app-card>
@Component({
selector: 'app-card',
template: `
<div class="card">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<ng-container *ngTemplateOutlet="bodyTemplate; context: { data: cardData }"></ng-container>
</div>
`,
})
export class CardComponent {
@ContentChild('header') headerTemplate!: TemplateRef<any>;
@ContentChild('body') bodyTemplate!: TemplateRef<any>;
cardData = 'Sample data';
}
ng-template vs. ng-container
| Feature | ng-template | ng-container |
|---|---|---|
| Rendering | Not rendered by default | Rendered as a lightweight container |
| Use Case | Define reusable template blocks | Group elements without adding extra DOM nodes |
| Structural Directives | Requires a directive to render | Can host structural directives directly |
Avoid Overuse of Templates: Use ng-template only when necessary to keep the DOM clean.
Pass Data Through Context: Use context objects for dynamic template rendering.
Combine with ng-container: Use ng-container for grouping structural directives to prevent unnecessary DOM elements.
