What is the difference between ElementRef, TemplateRef, and ViewContainerRef?

Q: What is the difference between ElementRef, TemplateRef, and ViewContainerRef?

**Target Audience:** Developers preparing for an Angular interview who have seen these three types in constructor or inject() calls and want a precise mental model of each, plus how they combine. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every "Verified" block was compiled with ngc (strict templates) on Angular 22.2.3 and run; DOM snippets are the real innerHTML / outerHTML . Security notes are quoted from the installed typings. ## 1. Why This Even Matters — A Story First Think of a print shop. - A **printed poster on the wall** is a finished thing you can point at. You can touch it, measure it, scribble on it. - A **printing plate** is not a poster. It is the blueprint you can print as many posters from as you like, each with different text filled in. - A **hook on the wall** is a spot where posters can be hung. You can hang one, hang five in a row, take

The problem

Question presented to candidate: "Explain ElementRef, TemplateRef and ViewContainerRef. Then use them to write a tiny structural directive, something like *repeat="3", and tell me where the created views actually end up in the DOM."

What a strong answer should cover:

ElementRef: a wrapper around a rendered element, nativeElement is the real DOM node (a comment node for ng-template); the typings flag it as a security risk to use directly.
TemplateRef: a blueprint of an <ng-template> (or a * structural directive host) that is not rendered until someone stamps it out; injectable only where there is a template, otherwise NG0201.
ViewContainerRef: an anchor point where views can be inserted; createEmbeddedView(templateRef, context), createComponent(Type), clear(), length, move, indexOf.
Views are inserted as siblings next to the anchor (a comment node), not as children of it; createComponent on a component's own container puts the new component after its host.
Template context: $implicit and named values become let- variables (let n; let total = total).
How this relates to ngTemplateOutlet, @if / @for, and dynamic components.

Clarifying questions expected:

"Should the directive clean up and re-render when the count changes?"
"Do you want to inject them or obtain them with a query?"

Code / implementation expected: Yes — a structural directive with TemplateRef + ViewContainerRef, plus a directive using ElementRef.

components
views

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers preparing for an Angular interview who have seen these three types in constructor or inject() calls and want a precise mental model of each, plus how they combine. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. Every "Verified" block was compiled with ngc (strict templates) on Angular 22.2.3 and run; DOM snippets are the real innerHTML / outerHTML. Security notes are quoted from the installed typings.

1. Why This Even Matters — A Story First

Think of a print shop.

A printed poster on the wall is a finished thing you can point at. You can touch it, measure it, scribble on it.
A printing plate is not a poster. It is the blueprint you can print as many posters from as you like, each with different text filled in.
A hook on the wall is a spot where posters can be hung. You can

The solution is hidden so you can try first

8 min read · 9 sections

Read the code

AngularA *repeat structural directive with TemplateRef and ViewContainerRef, plus ElementRef and createComponent

Open in playground

import { Component, Directive, ElementRef, Input, TemplateRef, ViewContainerRef, inject, signal } from "@angular/core";

// ElementRef: a wrapper around the host DOM element.
@Directive({ selector: "[showTag]" })
export class ShowTagDirective {
  constructor() {
    const el = inject(ElementRef<HTMLElement>).nativeElement;
    console.log("ElementRef.nativeElement:", el.tagName, el.constructor.name);
  }
}

// TemplateRef + ViewContainerRef: a tiny structural directive.
@Directive({ selector: "[repeat]" })
export class RepeatDirective {
  private tpl = inject(TemplateRef<{ $implicit: number; total: number }>);
  private vcr = inject(ViewContainerRef);
  @Input() set repeat(times: number) {
    this.vcr.clear();
    for (let i = 1; i <= times; i++) {
      this.vcr.createEmbeddedView(this.tpl, { $implicit: i, total: times });
    }
    console.log("ViewContainerRef.length =", this.vcr.length);
  }
}

@Component({ selector: "hello-badge", template: `<b>dynamic badge</b>` })
export class HelloBadgeComponent {}

@Component({
  selector: "app-root",
  imports: [ShowTagDirective, RepeatDirective],
  template: `
    <section id="box" showTag>
      <i *repeat="count(); let n; let total = total">{{ n }}/{{ total }}</i>
    </section>
    <button id="more" (click)="count.set(count() + 1)">more</button>
    <button id="badge" (click)="addBadge()">badge</button>`,
})
export class AppComponent {
  count = signal(2);
  private vcr = inject(ViewContainerRef); // the root host element's container
  addBadge() {
    this.vcr.createComponent(HelloBadgeComponent);
  }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.