For example, I used <ng container *ngTemplateOutlet to insert a greet template into the Component HTML:

#greet template contents: Hello

When the Angular framework detects this node, it executes the ɵɵ Templat rendering template:

/**
 * Creates an LContainer for an ng-template (dynamically-inserted view), e.g.
 *
 * <ng-template #foo>
 *    <div></div>
 * </ng-template>
 *
 * \@codeGenApi
 * @param {? } index The index of the container in the data array
 * @param {? } templateFn Inline template
 * @param {? } decls The number of nodes, local refs, and pipes for this template
 * @param {? } vars The number of bindings for this template
 * @param {? =} tagName The name of the container element, if applicable
 * @param {? =} attrsIndex Index of template attributes in the `consts` array.
 * @param {? =} localRefsIndex
 * @param {? =} localRefExtractor A function which extracts local-refs values from the template.
 *        Defaults to the current element associated with the local-ref.
 *
 * @return {? }* /
functionɵ ɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor) {
    / * *@type {? } * /
    const lView = getLView();
    / * *@type {? } * /
    const tView = getTView();
    / * *@type {? } * /
    const adjustedIndex = index + HEADER_OFFSET;
    / * *@type {? } * /
    const tNode = tView.firstCreatePass ?
        templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) :
        (/ * *@type {? } * / (tView.data[adjustedIndex]));
    setPreviousOrParentTNode(tNode, false);
    / * *@type {? } * /
    const comment = lView[RENDERER].createComment(ngDevMode ? 'container' : ' ');
    appendChild(tView, lView, comment, tNode);
    attachPatchData(comment, lView);
    addToViewTree(lView, lView[adjustedIndex] = createLContainer(comment, lView, comment, tNode));
    if (isDirectiveHost(tNode)) {
        createDirectivesInstances(tView, lView, tNode);
    }
    if(localRefsIndex ! =null) { saveResolvedLocalsInData(lView, tNode, localRefExtractor); }}Copy the code

(1) From the comment, prepared specifically for dynamically inserted View.

Generate instance for ng-container:

The NgTemplateOutlet class annotation details its usage:

/ * * *@fileoverview added by tsickle
 * Generated from: packages/common/src/directives/ng_template_outlet.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/ * * * \@ngModule CommonModule
 *
 * \@description* * Inserts an embedded view from a prepared `TemplateRef`. * * You can attach a context object to the `EmbeddedViewRef`  by setting `[ngTemplateOutletContext]`. * `[ngTemplateOutletContext]` should be an object, the object's keys will be available for binding * by the local template `let` declarations. * * \@usageNotes* ``` * <ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container> * ``` * * Using the key `$implicit` in the context object will set its value as default. * *  ### Example * * {\@example common/ngTemplateOutlet/ts/module.ts region='NgTemplateOutlet'}
 *
 * \@publicApi* /
class NgTemplateOutlet {
    / * * *@param {? } _viewContainerRef* /
    constructor(_viewContainerRef) {
        this._viewContainerRef = _viewContainerRef;
        this._viewRef = null;
        /**
         * A context object to attach to the {\@link EmbeddedViewRef}. This should be an
         * object, the object's keys will be available for binding by the local template `let`
         * declarations.
         * Using the key `$implicit` in the context object will set its value as default.
         */
        this.ngTemplateOutletContext = null;
        /** * A string defining the template reference and optionally the context object for the template. */
        this.ngTemplateOutlet = null;
    }
Copy the code

Final runtime effect:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: