What is the difference between ElementRef, TemplateRef, and ViewContainerRef in Angular?
Understand the difference between ElementRef, TemplateRef, and ViewContainerRef in Angular, and how they work together to power structural directives.
Expected Interview Answer
ElementRef is a wrapper around a single DOM element, TemplateRef represents an embedded template (a blueprint) you can instantiate, and ViewContainerRef is a container where you dynamically create and attach views.
ElementRef gives direct access to a native element (via nativeElement) and is mainly used with Renderer2 for safe DOM manipulation. TemplateRef is captured from an <ng-template> and holds an unrendered view definition. ViewContainerRef acts as an insertion point in the DOM where you call createEmbeddedView(templateRef) or createComponent() to render content dynamically. They are typically injected together in structural directives like *ngIf, where a TemplateRef defines what to show and a ViewContainerRef decides whether and where to stamp it out.
- ElementRef enables controlled DOM access with Renderer2
- TemplateRef lets you define reusable, deferred view blueprints
- ViewContainerRef enables dynamic view and component creation
- Together they power structural directives like *ngIf and *ngFor
- Support building flexible, reusable UI primitives
AI Mentor Explanation
ElementRef is a specific player already on the field you can talk to directly. TemplateRef is the team's game plan on paper, a set of instructions not yet in play. ViewContainerRef is the captain deciding which plans to activate and where to place players, stamping the strategy onto the actual ground during the match.
Step-by-Step Explanation
Step 1
Inject ElementRef
Get a reference to a host DOM element and access it via nativeElement, ideally through Renderer2.
Step 2
Capture a TemplateRef
Grab an <ng-template> via @ViewChild or a structural directive's implicit input; it holds an unrendered view.
Step 3
Get a ViewContainerRef
Inject it to obtain an insertion point in the DOM where views can be created and attached.
Step 4
Create the view
Call viewContainerRef.createEmbeddedView(templateRef) or createComponent() to render content dynamically.
Step 5
Manage lifecycle
Clear, move, or detach views through the ViewContainerRef as application state changes.
What Interviewer Expects
- Clear one-line definition of each of the three
- Understanding that TemplateRef is unrendered
- Knowing ViewContainerRef creates and hosts views
- Why ElementRef should be used with Renderer2
- How the three combine in structural directives
- Security awareness around direct nativeElement access
Common Mistakes
- Confusing ElementRef with ViewContainerRef
- Thinking TemplateRef renders content by itself
- Manipulating nativeElement directly instead of via Renderer2
- Not knowing createEmbeddedView vs createComponent
- Assuming ViewContainerRef holds a single fixed view
- Ignoring XSS risks of direct DOM access
Best Answer (HR Friendly)
“ElementRef points to an actual element on the page, TemplateRef is a saved blueprint for a piece of UI that hasn't been shown yet, and ViewContainerRef is the spot where you can dynamically create and insert those blueprints. Angular's own *ngIf and *ngFor use all three together.”
Code Example
@Directive({ selector: '[appIf]', standalone: true })
export class AppIfDirective {
constructor(
private templateRef: TemplateRef<unknown>,
private viewContainer: ViewContainerRef,
) {}
@Input() set appIf(condition: boolean) {
this.viewContainer.clear();
if (condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
}
}
}Follow-up Questions
- Why should you use Renderer2 instead of ElementRef.nativeElement directly?
- How does *ngIf use TemplateRef and ViewContainerRef internally?
- What is the difference between createEmbeddedView and createComponent?
- How do you pass context into an embedded view?
- What are the security risks of direct DOM manipulation?
- How does ViewContainerRef differ from ng-content projection?
MCQ Practice
1. Which one represents an unrendered view blueprint?
TemplateRef holds the definition of an <ng-template> that has not yet been instantiated into the DOM.
2. Where do you dynamically create and attach views?
ViewContainerRef is the insertion point where createEmbeddedView or createComponent renders content.
3. What does ElementRef.nativeElement give you?
ElementRef wraps a native DOM element, exposed via nativeElement, best manipulated through Renderer2.
Flash Cards
What is ElementRef? — A wrapper around a single native DOM element, accessed via nativeElement.
What is TemplateRef? — A reference to an unrendered <ng-template>, a reusable view blueprint.
What is ViewContainerRef? — An insertion point where views/components are dynamically created and attached.
How to render a TemplateRef? — viewContainerRef.createEmbeddedView(templateRef).
Why use Renderer2 with ElementRef? — Safe, platform-agnostic DOM changes that avoid direct nativeElement XSS risks.