docs(renderer): remove renderer

Author: kapunahelewong

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

@@ -1,10 +1,9 @@
-/* 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/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/bag/bag.ts

@@ -4,7 +4,7 @@ import { Component, ContentChildren, Directive, ElementRef, EventEmitter,
          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,8 +76,8 @@ export class BankAccountComponent {
   @Input() bank: string;
   @Input('account') id: string;
 
-  constructor(private renderer: Renderer, private el: ElementRef ) {
-    renderer.setElementProperty(el.nativeElement, 'customProperty', true);
+  constructor(private el: ElementRef ) {
+    el.nativeElement.style.customProperty = true;
   }
 }
 

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