[WIP]docs(sweep): remove renderer throughout

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,14 +1,14 @@
 /* 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]'
 })
 
 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,14 +1,14 @@
 // #docregion
-import { Directive, ElementRef, Renderer } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 // Same directive name and selector as
 // HighlightDirective in parent AppRootModule
 // It selects for both input boxes and  'highlight' attr
 // 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