<ng-template> element defines a template that is not rendered by default.
<ng-template>, you can define template content that is only being rendered by Angular when you, whether directly or indirectly, specifically instruct it to do so, allowing you to have full control over how and when the content is displayed.
Note that if you wrap content inside an
<ng-template> without instructing Angular to render it, such content will not appear on a page. For example, see the following HTML code, when handling it Angular won't render the middle "Hip!" in the phrase "Hip! Hip! Hooray!" because of the surrounding
<p>Hip!</p> <ng-template> <p>Hip!</p> </ng-template> <p>Hooray!</p>
Further information is available in the Usage Notes...
One of the main uses for
<ng-template> is to hold template content that will be used by Structural directives. Those directives can add and remove copies of the template content based on their own logic.
To add copies of the template to the DOM, pass this object to the
A Query (such as
ViewChild) can find the
TemplateRef associated to an
<ng-template> element so that it can be used programmatically; for instance, to pass it to the
<ng-template> tags you can reference variables present in the surrounding outer template. Additionally, a context object can be associated with
<ng-template> elements. Such an object contains variables that can be accessed from within the template contents via template (
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.