*ngIf Placing Comment When False

user_3749219 0
Viewed 1747

I noticed when I have a *ngIf that evaluates to false, it is inserting a blank HTML comment instead of the element Is there a way to stop it from doing this?

e.g.
<!---->
angular
1 Answers

As already was mentioned in comment this is part of the Angular compiler.

*ngIf is a structural directive that can be expanded to

<ng-template [ngIf]="someValue"></ng-template>

ng-template is represented by EmbeddedView. For each EmbeddedView angular compiler creates anchorDef with element like:

element: {
   ns: null,
   name: null,

Then angular creates Comment node for elements with null name

export function createElement(view: ViewData, renderHost: any, def: NodeDef): ElementData {
  ...
  if (view.parent || !rootSelectorOrNode) {
    if (elDef.name) {
      el = renderer.createElement(elDef.name, elDef.ns);
    } else {
      el = renderer.createComment('');
    }

In dev mode angular also stores bindings in this node:

function debugCheckAndUpdateNode(
    view: ViewData, nodeDef: NodeDef, argStyle: ArgumentType, givenValues: any[]): void {
      ...
      if (!elDef.element !.name) {
        // a comment.
        view.renderer.setValue(el, `bindings=${JSON.stringify(bindingValues, null, 2)}`);
      }

so we can see in our rendered DOM something like this:

<!--bindings={
  "ng-reflect-ng-if": "true"
}-->

And the main purpose for having this comment node is this way angular knows where embedded view will be placed in DOM.

user_54851670
Related