docs(renderer): remove renderer (#2925)

public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts

@@ -1,10 +1,10 @@
 /* tslint:disable:no-unused-variable */
 // #docregion
-import { Directive, ElementRef, Input, Renderer } from '@angular/core';
+import { Directive, ElementRef, Input } from '@angular/core';
 
 @Directive({ selector: '[myHighlight]' })
 export class HighlightDirective {
-    constructor(el: ElementRef, renderer: Renderer) {
-       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
+    constructor(el: ElementRef) {
+       el.nativeElement.style.backgroundColor = 'yellow';
     }
 }

public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:no-unused-variable */
 // #docregion
-import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]'
@@ -8,7 +8,7 @@ import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/c
 
 export class HighlightDirective {
   // #docregion ctor
-  constructor(private el: ElementRef, private renderer: Renderer) { }
+  constructor(private el: ElementRef) { }
   // #enddocregion ctor
 
   // #docregion mouse-methods, host
@@ -26,7 +26,7 @@ export class HighlightDirective {
   // #enddocregion host
 
   private highlight(color: string) {
-    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
+    this.el.nativeElement.style.backgroundColor = 'yellow';
   }
   // #enddocregion mouse-methods
 

public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts

@@ -1,6 +1,7 @@
+/* tslint:disable:member-ordering */
 // #docplaster
 // #docregion full
-import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]'
@@ -9,7 +10,7 @@ import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/c
 export class HighlightDirective {
   private _defaultColor = 'red';
 
-  constructor(private el: ElementRef, private renderer: Renderer) { }
+  constructor(private el: ElementRef) { }
   // #enddocregion class
 
   // #docregion defaultColor
@@ -33,7 +34,7 @@ export class HighlightDirective {
   }
 
   private highlight(color: string) {
-    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
+    this.el.nativeElement.style.backgroundColor = color;
   }
 }
 // #enddocregion class

public/docs/_examples/ngmodule/ts/app/contact/highlight.directive.ts

@@ -5,13 +5,13 @@
 // and it highlights in blue instead of gold
 
 // #docregion
-import { Directive, ElementRef, Renderer } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 @Directive({ selector: '[highlight], input' })
 /** Highlight the attached element or an InputElement in blue */
 export class HighlightDirective {
-  constructor(renderer: Renderer, el: ElementRef) {
-    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'powderblue');
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'powderblue';
     console.log(
       `* Contact highlight called for ${el.nativeElement.tagName}`);
   }

public/docs/_examples/ngmodule/ts/app/hero/highlight.directive.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Directive, ElementRef, Renderer } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 // Same directive name and selector as
 // HighlightDirective in parent AppRootModule
@@ -7,8 +7,8 @@ import { Directive, ElementRef, Renderer } from '@angular/core';
 // and it highlights in beige instead of yellow
 @Directive({ selector: '[highlight]' })
 export class HighlightDirective {
-    constructor(renderer: Renderer, el: ElementRef) {
-    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'beige');
+    constructor(el: ElementRef) {
+       el.nativeElement.style.backgroundColor = 'beige';
        console.log(`* Hero highlight called for ${el.nativeElement.tagName}`);
     }
 }

public/docs/_examples/ngmodule/ts/app/highlight.directive.ts

@@ -1,11 +1,11 @@
 // #docregion
-import { Directive, ElementRef, Renderer } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 @Directive({ selector: '[highlight]' })
 /** Highlight the attached element in gold */
 export class HighlightDirective {
-  constructor(renderer: Renderer, el: ElementRef) {
-    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'gold');
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'gold';
     console.log(
       `* AppRoot highlight called for ${el.nativeElement.tagName}`);
   }

public/docs/_examples/ngmodule/ts/app/shared/highlight.directive.ts

@@ -1,12 +1,12 @@
 /* tslint:disable */
 // Exact copy of contact/highlight.directive except for color and message
-import { Directive, ElementRef, Renderer } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 @Directive({ selector: '[highlight], input' })
 /** Highlight the attached element or an InputElement in gray */
 export class HighlightDirective {
-  constructor(renderer: Renderer, el: ElementRef) {
-    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'lightgray');
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'lightgray';
     console.log(
       `* Shared highlight called for ${el.nativeElement.tagName}`);
   }

public/docs/_examples/style-guide/ts/02-08/app/shared/input-highlight.directive.ts

@@ -1,10 +1,10 @@
 // #docregion
-import { Directive, ElementRef, Renderer } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 @Directive({ selector: 'input'})
 /** Highlight the attached input text element in blue */
 export class InputHighlightDirective {
-  constructor(renderer: Renderer, el: ElementRef) {
-    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'powderblue');
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'powderblue';
   }
 }

public/docs/_examples/testing/ts/app/about.component.spec.ts

@@ -20,7 +20,8 @@ describe('AboutComponent (highlightDirective)', () => {
 
   it('should have skyblue <h2>', () => {
     const de = fixture.debugElement.query(By.css('h2'));
-    expect(de.styles['backgroundColor']).toBe('skyblue');
+    const bgColor = de.nativeElement.style.backgroundColor;
+    expect(bgColor).toBe('skyblue');
   });
   // #enddocregion tests
 });

public/docs/_examples/testing/ts/app/bag/bag.spec.ts

@@ -332,8 +332,8 @@ describe('TestBed Component Tests', () => {
     expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
   });
 
-  // #docregion debug-dom-renderer
-  it('DebugDomRender should set attributes, styles, classes, and properties', () => {
+  // #docregion dom-attributes
+  it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
     const fixture = TestBed.createComponent(BankAccountParentComponent);
     fixture.detectChanges();
     const comp = fixture.componentInstance;
@@ -351,12 +351,18 @@ describe('TestBed Component Tests', () => {
     expect(el.classes['closed']).toBe(true, 'closed class');
     expect(el.classes['open']).toBe(false, 'open class');
 
-    expect(el.properties['customProperty']).toBe(true, 'customProperty');
-
     expect(el.styles['color']).toBe(comp.color, 'color style');
     expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
+  // #enddocregion dom-attributes
+
+    // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+    // expect(el.properties['customProperty']).toBe(true, 'customProperty');
+
+  // #docregion dom-attributes
   });
-  // #enddocregion debug-dom-renderer
+  // #enddocregion dom-attributes
+
+
 });
 
 describe('TestBed Component Overrides:', () => {

public/docs/_examples/testing/ts/app/bag/bag.ts

@@ -1,10 +1,10 @@
 /* tslint:disable:forin */
-import { Component, ContentChildren, Directive, ElementRef, EventEmitter,
+import { Component, ContentChildren, Directive, EventEmitter,
          Injectable, Input, Output, Optional,
          HostBinding, HostListener,
          OnInit, OnChanges, OnDestroy,
          Pipe, PipeTransform,
-         Renderer, SimpleChange } from '@angular/core';
+         SimpleChange } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
@@ -76,9 +76,10 @@ export class BankAccountComponent {
   @Input() bank: string;
   @Input('account') id: string;
 
-  constructor(private renderer: Renderer, private el: ElementRef ) {
-    renderer.setElementProperty(el.nativeElement, 'customProperty', true);
-  }
+  // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+  // constructor(private renderer: Renderer, private el: ElementRef ) {
+  //   renderer.setElementProperty(el.nativeElement, 'customProperty', true);
+  // }
 }
 
 /** A component with attributes, styles, classes, and property setting */

public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts

@@ -44,12 +44,14 @@ describe('HighlightDirective', () => {
   });
 
   it('should color 1st <h2> background "yellow"', () => {
-    expect(des[0].styles['backgroundColor']).toBe('yellow');
+    const bgColor = des[0].nativeElement.style.backgroundColor;
+    expect(bgColor).toBe('yellow');
   });
 
   it('should color 2nd <h2> background w/ default color', () => {
     const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
-    expect(des[1].styles['backgroundColor']).toBe(dir.defaultColor);
+    const bgColor = des[1].nativeElement.style.backgroundColor;
+    expect(bgColor).toBe(dir.defaultColor);
   });
 
   it('should bind <input> background to value color', () => {
@@ -65,17 +67,19 @@ describe('HighlightDirective', () => {
     expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
   });
 
-  // customProperty tests
-  it('all highlighted elements should have a true customProperty', () => {
-    const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
-    expect(allTrue).toBe(true);
-  });
 
   it('bare <h2> should not have a customProperty', () => {
     expect(bareH2.properties['customProperty']).toBeUndefined();
   });
   // #enddocregion selected-tests
 
+  // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+  // // customProperty tests
+  // it('all highlighted elements should have a true customProperty', () => {
+  //   const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
+  //   expect(allTrue).toBe(true);
+  // });
+
   // injected directive
   // attached HighlightDirective can be injected
   it('can inject `HighlightDirective` in 1st <h2>', () => {

public/docs/_examples/testing/ts/app/shared/highlight.directive.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core';
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
 
 @Directive({ selector: '[highlight]' })
 /** Set backgroundColor for the attached element to highlight color
@@ -10,13 +10,11 @@ export class HighlightDirective implements OnChanges {
 
   @Input('highlight') bgColor: string;
 
-  constructor(private renderer: Renderer, private el: ElementRef) {
-    renderer.setElementProperty(el.nativeElement, 'customProperty', true);
+  constructor(private el: ElementRef) {
+    el.nativeElement.style.customProperty = true;
   }
 
   ngOnChanges() {
-    this.renderer.setElementStyle(
-      this.el.nativeElement, 'backgroundColor',
-      this.bgColor || this.defaultColor );
+    this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
   }
 }

public/docs/ts/latest/guide/attribute-directives.jade

@@ -78,7 +78,6 @@ block highlight-directive-1
     1. `ElementRef` [injects](dependency-injection.html) into the directive's constructor
     so the code can access the DOM element.
     1. `Input` allows data to flow from the binding expression into the directive.
-    1. `Renderer` allows the code to change the DOM element's style.
 
     Next, the `@Directive` decorator function contains the directive metadata in a configuration object
     as an argument.
@@ -107,10 +106,10 @@ p
     |  Exporting #[code HighlightDirective] makes it accessible to other components.
 :marked
   Angular creates a new instance of the directive's controller class for
-  each matching element, injecting an Angular `ElementRef` and `Renderer`
+  each matching element, injecting an Angular `ElementRef`
   into the constructor.
   `ElementRef` is a service that grants direct access to the DOM element
-  through its `nativeElement` property and `Renderer` allows the code to set the element style.
+  through its `nativeElement` property.
 
 .l-main-section
 a#apply-directive

public/docs/ts/latest/guide/testing.jade

@@ -1578,13 +1578,16 @@ figure.image-display
   in `By.css('h2:not([highlight])')` helps find `<h2>` elements that _do not_ have the directive.
   `By.css('*:not([highlight])')` finds _any_ element that does not have the directive.
 
+// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
   * `DebugElement.styles` affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
   But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.
 
+:marked
   * Angular adds a directive to the injector of the element to which it is applied. 
   The test for the default color uses the injector of the 2nd `<h2>` to get its `HighlightDirective` instance
   and its `defaultColor`.
 
+// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future? 
   * `DebugElement.properties` affords access to the artificial custom property that is set by the directive.
 
 a(href="#top").to-top Back to top
@@ -1875,8 +1878,7 @@ table
       :marked
         The testing shims (`karma-test-shim`, `browser-test-shim`) 
         establish the [initial test environment](##testbed-initTestEnvironment) and a default testing module.
-        The default testing module is configured with basic declaratives and some Angular service substitutes (e.g. `DebugDomRender`) 
-        that every tester needs.
+        The default testing module is configured with basic declaratives and some Angular service substitutes that every tester needs.
         
         Call `configureTestingModule` to refine the testing module configuration for a particular set of tests
         by adding and removing imports, declarations (of components, directives, and pipes), and providers.
@@ -2214,6 +2216,7 @@ table
 
 +makeExample('testing/ts/app/hero/hero-list.component.spec.ts', 'by', 'app/hero/hero-list.component.spec.ts')(format=".")
 
+// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
   #renderer-tests
   :marked
     Many custom application directives inject the `Renderer` and call one of its `set...` methods.
@@ -2256,7 +2259,7 @@ table
   :marked
     Here's an example of `Renderer` tests from the <live-example plnkr="bag-specs">live "Specs Bag" sample</live-example>.
 
-+makeExample('testing/ts/app/bag/bag.spec.ts', 'debug-dom-renderer')(format=".")
+  +makeExample('testing/ts/app/bag/bag.spec.ts', 'dom-attributes')(format=".")
 
 a(href="#top").to-top Back to top