Redundant and cryptic usage of ng-container in many places

[ducatyb]

I've been looking into the internal implementation of ng-zorro-antd and found several occasions where ng-container is used in a pretty cryptic style. For example, in the template of NzProgressComponent

        <ng-template #formatTemplate>
          <ng-container *nzStringTemplateOutlet="formatter; context: { $implicit: nzPercent }; let formatter">
            {{ formatter(nzPercent) }}
          </ng-container>
        </ng-template>

(see original code)

I believe this complicated code is equivalent to a much simpler version

        <ng-template #formatTemplate>
            {{ formatter(nzPercent) }}
        </ng-template>

What is the reason of using nzStringTemplateOutlet with a convoluted template micro syntax? Or maybe I just wrongly interpreted the code?

Any hints or comments are greatly appreciated.

Details on the equivalency of the two code snippets above

The complicated version will be transformed by Angular into something like this

        <ng-template #formatTemplate>
          <ng-container
               [nzStringTemplateOutlet]="formatter"
               [nzStringTemplateOutletContext]="{ $implicit: nzPercent }"
               let-formatter="$implicit">
            {{ formatter(nzPercent) }}
          </ng-container>
        </ng-template>

Here nzStringTemplateOutlet is bound to formatter which is a function object. As a result, the object {$implicit: nzPercent} bound to nzStringTemplateOutletContext is never used. Instead this.context is used as the context object for the inner template.

  private recreateView(): void {
    this.viewContainer.clear();
    const isTemplateRef = this.nzStringTemplateOutlet instanceof TemplateRef;
    const templateRef = (isTemplateRef ? this.nzStringTemplateOutlet : this.templateRef) as NzSafeAny;
    this.embeddedViewRef = this.viewContainer.createEmbeddedView(
      templateRef,
      isTemplateRef ? this.nzStringTemplateOutletContext : this.context
    );
  }

  private updateContext(): void {
    const isTemplateRef = this.nzStringTemplateOutlet instanceof TemplateRef;
    const newCtx = isTemplateRef ? this.nzStringTemplateOutletContext : this.context;
    const oldCtx = this.embeddedViewRef!.context as NzSafeAny;
    if (newCtx) {
      for (const propName of Object.keys(newCtx)) {
        oldCtx[propName] = newCtx[propName];
      }
    }
  }

(again, the original code is here)

this.context is set to an object with just one property named $implicit. Its value is nzStringTemplateOutlet, which is the function formatter from NzProgressComponent

    if (nzStringTemplateOutlet) {
      this.context.$implicit = nzStringTemplateOutlet.currentValue;
    }

(original code)

So the part

               let-formatter="$implicit">
            {{ formatter(nzPercent) }}

basically defines a template input variable named 'formatter' which references the $implicit property of the context object, which turns out to be the formatter function of NzProgressComponent. We can confirm this by looking at the code generated by Angular:

function NzProgressComponent_ng_template_0_span_0_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    _angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵelementContainerStart"](0);
    _angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵtext"](1);
    _angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵelementContainerEnd"]();
} if (rf & 2) {
    const formatter_r9 = ctx.$implicit;
    const ctx_r8 = _angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵnextContext"](4);
    _angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵadvance"](1);
    _angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵtextInterpolate1"](" ", formatter_r9(ctx_r8.nzPercent), " ");
} }

Note that let-formatter is what gives birth to the so called template input variable formatter_r9 above.

To summarize, the formatter function of NzProgressComponent must go through several steps to eventually get to the variable formatter_r9.

• First it is set as the value of the input nzStringTemplateOutlet
• Next it is embedded into this.context.$implicit (where this is an instance of NzStringTemplateOutletDirective)
• this.context is used as the context ctx variable for the template function NzProgressComponent_ng_temp...
• The template function NzProgressComponent_ng_temp... calls formatter_r9, which has the value of ctx.$implicit, which is what has been set to nzStringTemplateOutlet, which turns out to be the formatter function in the first place

[wzhudev]

Lots of properties including nzPercent accept TemplateRef or string. nzStringTemplateOutlet is for dealing with this situation.

<ng-container *nzStringTemplateOutlet="formatter; context: { $implicit: nzPercent }; let formatter">
   {{ formatter(nzPercent) }}
</ng-container>

In this example, if nzPercent is a template, we will render it and inject the context. Otherwise, we would directly render {{ formatter(nzPercent) }}.

In conclusion, we could not simplify this.

[ducatyb]

Thanks, I got it! The input nzFormat property of NzProgressComponent can be either a function or a TemplateRef. In the latter case, formatter will also be a TemplateRef and so we need nzStringTemplateOutlet to render it correly. Thank you again for the valuable hint.

  @Input() nzFormat?: NzProgressFormatter;

  get formatter(): NzProgressFormatter {
    return this.nzFormat || defaultFormatter;
  }