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

by

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); <-----------------

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How do I create a singleton service in Angular 2?
  3. OrderBy pipe issue
  4. Remove/replace a component’s selector tag from HTML [duplicate]
  5. Apply a directive conditionally
  6. How can I unit test a component that uses the Router in Angular?
  7. How can i make a MatDialog draggable / Angular Material
  8. Angular 2 Routing run in new tab
  9. Angular CDK : attach overlay to a clicked element
  10. error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
  11. Angular 4/5/6 Global Variables
  12. Best way to “flatten” an array inside an RxJS Observable
  13. View is not updated on change in Angular2
  14. Debug & Run Angular2 Typescript with Visual Studio Code?
  15. Ionic2/Angular2 – Read a custom config file
  16. Parameter in to Animation Angular2
  17. Angular – two subscriptions in ngOnInit result in object ‘undefined’
  18. Render content between the component tags
  19. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  20. FormBuilder group is deprecated
  21. What is the difference between @Inject vs constructor injection as normal parameter in Angular 2?
  22. How to clear form after submit in Angular 2?
  23. Angular4 APP_INITIALIZER won’t delay initialization
  24. Page transition animations with Angular 2.0 router and component interface promises
  25. Angular load external configuration before AppModule loads
  26. Inject Http manually in Angular 2
  27. Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\DumpStack.log.tmp
  28. Angular 6 Uncaught ReferenceError: Buffer is not defined
  29. Angular 6 Migration -.angular-cli.json to angular.json
  30. Filtering specific column in Angular Material Table with filtering in angular?

Leave a Comment