Angular's ng-template: Reusable UI Blueprints
ng-template defines a reusable UI blueprint that isn't rendered by default. Use it with ngTemplateOutlet to create configurable components, like passing a custom item layout to a generic list.
Why it exists
To separate the definition of a UI block from its rendering. This allows for creating highly configurable and reusable components by letting a parent component pass down UI structure (a template) to a child component, instead of just data.
The mental model
Think of an ng-template as a rubber stamp for a piece of UI. You create the stamp (the template) but it doesn't make any marks on the page by itself. You need an ink pad and a hand to press it down—that's what a directive like ngTemplateOutlet does. It takes your template "stamp" and renders it wherever you place the outlet.
How it works
You define a block of HTML inside an <ng-template> tag and give it a template reference variable, like #myTemplate. By default, this block is not rendered. To render it, you pass this reference to a structural directive. For example, the ngTemplateOutlet directive will stamp out the template's content: <ng-container *ngTemplateOutlet="myTemplate"></ng-container>. The content inside the template has access to the properties of the component where it was defined.
When to use it
Use ng-template when building generic, "slot-based" components. A classic use case is a generic list or table component that accepts a custom template for how each item or cell should be rendered. The parent component defines the look with ng-template, and the child list component uses ngTemplateOutlet to stamp it out for each item.
When not to use it
Avoid ng-template for simple conditional rendering where a standard ngIf on a div or ng-container will suffice. It's also not a direct replacement for ng-content, which is for projecting static content from a parent into a child's designated <ng-content> slot. Use ng-template for passing around dynamic, reusable template *references.
One canonical example
Imagine a generic list component that needs to display items, but you want the parent component to decide how each item looks. The parent defines the look in an ng-template with a reference variable (#itemTmpl). It then passes this template reference to the generic list component. The list component iterates through its data and uses the ngTemplateOutlet directive to render the provided template for each item, passing the specific item's data into the template's context. This decouples the list's logic from its presentation.
Interview question
In Angular, for which use case is ng-template the most suitable solution?
- a.Creating a standalone, self-contained UI component that manages its own state and logic.
- b.Displaying or hiding a section of the UI based on a runtime condition.
- c.Embedding static HTML content directly from a parent into a child component's specific placeholder.
- d.Defining a reusable UI blueprint that a parent component can pass to a child for rendering.Correct
Why? this is the answer
Option D correctly identifies the core purpose of ng-template: to define a reusable UI structure that can be passed as a reference and rendered by another component, enabling configurable components like a generic list with custom item layouts. Options A and C describe the use cases for ngIf and ng-content, respectively, which the card explicitly states are not direct replacements for ng-template.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
- #angular
- #templates
- #components
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles