TemplateRef and ViewContainerRef

This repo will show you several examples about how TemplateRef, ViewContainerRef and ViewChild works.

Parser > @angular/compiler/template_parser

<template> The Content Template element MDN

The HTML Content Template () element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

<ng-template> The Angular Template element

Angular’s element is not a true Web Component (unlike ). It merely mirrors the concepts behind it to allow you to use as it’s intended in the spec. When we compile our code (JiT or AoT), we will see no elements outputted in the DOM. However, this doesn’t mean we can’t use things like Shadow DOM, as they are still completely possible.

This is a very common use of the ngIf/else functionality: we display an alternative loading template while waiting for the data to arrive from the backend.

<div class="list-of-something" *ngIf="isLoaded else loading">
  ...
</div>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

<ng-container> Group sibling elements and inject a template

Angular’s <ng-container> element provides us an element that we can attach a structural directive to a section of the page, without having to create an extra element just for that. So use <ng-container> to group elements when there is no suitable host element for the directive.

There is another major use case for the ng-container directive: it can also provide a placeholder for injecting a template dynamically into the page (see: NgTemplateOutlet and NgComponentOutlet directive).

• Angular's test for <ng-container> element

<ng-content>​

Angular’s <ng-content> tag is a placeholder for the external content. It tells Angular where to insert that content.

<!-- Parent Def -->
<my-parent>
    <ng-content></ng-content>
</my-parent>

<!-- ---- -->

<my-parent>
    <span>My custom external content.</span>
</my-parent>

Render References

API > @angular/common

NgTemplateOutlet DIRECTIVE (link)

Inserts an embedded view from a prepared TemplateRef.

NgComponentOutlet DIRECTIVE (link)

Instantiates a single Component type and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.

Template Context (external parameters)

<ng-container 
   *ngTemplateOutlet="myTemplate;context:{a: true}">
</ng-container>

API > @angular/core

ViewContainerRef (https://angular.io/api/core/ViewContainerRef)

Represents a container where one or more views can be attached to a component.

• view_container_ref

TemplateRef (https://angular.io/api/core/TemplateRef)

Represents an embedded template that can be used to instantiate embedded views. To instantiate embedded views based on a template, use the ViewContainerRef method createEmbeddedView().

• template_ref

ComponentFactoryResolver (https://angular.io/api/core/ComponentFactoryResolver)

A simple registry that maps Components to generated ComponentFactory classes that can be used to create instances of components. Use to obtain the factory for a given component type, then use the factory's create() method to create a component of that type.

And...​

ElementRef (https://angular.io/api/core/ElementRef)

A wrapper around a native element inside of a View.

• element_ref

ChangeDetectionRef (https://angular.io/api/core/ChangeDetectorRef)

Base class for Angular Views, provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. Use the methods to add and remove views from the tree, initiate change-detection, and explicitly mark views as dirty, meaning that they have changed and need to be rerendered.

ViewRef​ (https://angular.io/api/core/ViewRef)

Represents an Angular view, specifically the host view that is defined by a component. Also serves as the base class that adds destroy methods for embedded views.

EmbeddedViewRef (https://angular.io/api/core/EmbeddedViewRef)

Represents an Angular view in a view container. An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef.

• view_ref

export abstract class ViewRef extends ChangeDetectorRef {
    ...
export abstract class EmbeddedViewRef<C> extends ViewRef {
    ...

ComponentRef (https://angular.io/api/core/ComponentRef)

Represents a component created by a ComponentFactory. Provides access to the component instance and related objects, and provides the means of destroying the instance.

• component_factory

Interpolate template #variable

See example4 use case.

• ViewChild angular-dom-manipulation-techniques-using-viewcontainerref

    <!-- view1 will be interpolated by Angular render engine -->
    <button #view1>Simple Button {{checkView(view1, "Native HTML Element")}}</button>

• Angular render3/instructions/storage.ts#L35

export function ɵɵreference<T>(index: number) {
  const contextLView = getContextLView(); // State of the current view being processed. An array of nodes (text, element, container, etc), pipes, their bindings, and any local variables that need to be stored between invocations.
  return load<T>(contextLView, index);
}

    const _r0 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵreference"](3);
    const _r1 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵreference"](7);
    ...
    _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);
    _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate1"]("Simple Button ", ctx.checkView(_r0, "Native HTML Element"), "");
    _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵadvance"](4);
    _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](ctx.checkView(_r1, "Component"));

EntryComponents

Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.

In Angular 9 (Ivy) EntryComponent has been deprecated and there is no need to put dynamic components to it because Factory is created in a static field on the component itself.

• EntryComponent - angular/angular/issues/33715

Sources

• ElementRef, TemplateRef, ViewRef, ComponentRef and ViewContainerRef- ng_template_outlet.ts
• compiler/src/template_parser/template_parser
• core/src/render3/STATUS.md#______refs​
• Properly insert views into ViewContainerRef injected
• exploring-angular-dom-manipulation-techniques-using-viewcontainerref
• dynamic-component-loader
• angular-ngfor-template-element Google
• benefit-of-using-ng-container-vs-template
• Angular ng-template, ng-container and ngTemplateOutlet
• angular-ng-content
• Module EntryComponents