What does the "ng-reflect-*" attribute do in Angular2/4?

Question

Here I have a complex data structure in an Angular4 application.

It is a directed multigraph parametrized with dictionaries both on nodes and on links. My angular components are working on this complex data model.

In Angular2.4, everything worked fine. Since we switched to Angular4, I get this into my DOM:

<g flareNode="" ng-reflect-model="{'id':'an-id-of-my-object'">

...which is generated from the following template snippet:

<svg:g flareNode [model]="item"></svg:g>

Note, model is here simply a data member of my component. It has no (...should have no) specific Angular2 meaning. It is a part of the complex data structure behind my app.

My first impression is that Angular serializes the model data member of the component class, gets its 30 first characters, and then puts this totally useless thingy into the DOM!

Am I right? What is this whole ng-reflect-model in the DOM, what specific purpose has it in Angular4 what it didn't have in Angular2?

Answer 1

ng-reflect-${name} attributes are added for debugging purposes and show the input bindings that a component/directive has declared in its class. So if your component is declared like this:

class AComponent {
  @Input() data;
  @Input() model;
}

the resulting html will be rendered like this:

<a-component ng-reflect-data="..." ng-reflect-model="...">
   ...
<a-component>

They exist only when debugging mode is used - default mode for Angular. To disable them, use

import {enableProdMode} from '@angular/core';

enableProdMode();

inside main.ts file. These attributes are added by this function here:

function debugCheckAndUpdateNode(...): void {
  const changed = (<any>checkAndUpdateNode)(view, nodeDef, argStyle, ...givenValues);
  if (changed) {
    const values = argStyle === ArgumentType.Dynamic ? givenValues[0] : givenValues;
    if (nodeDef.flags & NodeFlags.TypeDirective) {
      const bindingValues: {[key: string]: string} = {};
      for (let i = 0; i < nodeDef.bindings.length; i++) {
        const binding = nodeDef.bindings[i];
        const value = values[i];
        if (binding.flags & BindingFlags.TypeProperty) {
          bindingValues[normalizeDebugBindingName(binding.nonMinifiedName !)] =
              normalizeDebugBindingValue(value); <------------------
        }
      }

    ...

    for (let attr in bindingValues) {
      const value = bindingValues[attr];
      if (value != null) {
        view.renderer.setAttribute(el, attr, value); <-----------------