docs(attribute-directives): add Renderer to style elements

closes #2164

Author: Foxandxss

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 } from '@angular/core';
+import { Directive, ElementRef, Input, Renderer } from '@angular/core';
 
 @Directive({ selector: '[myHighlight]' })
 export class HighlightDirective {
-    constructor(el: ElementRef) {
-       el.nativeElement.style.backgroundColor = 'yellow';
+    constructor(el: ElementRef, renderer: Renderer) {
+       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
     }
 }

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

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

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

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

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

@@ -71,6 +71,7 @@ block highlight-directive-1
     We need the `Directive` symbol for the `@Directive` decorator.
     We need the `ElementRef` to [inject](dependency-injection.html) into the directive's constructor
     so we can access the DOM element.
+    We also need `Renderer` so we can change the DOM element's style.
     We don't need `Input` immediately but we will need it later in the chapter.
 
     Then we define the directive metadata in a configuration object passed
@@ -101,11 +102,10 @@ p
     | We export `HighlightDirective` to make 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` 
+  each matching element, injecting an Angular `ElementRef` and `Renderer`
   into the constructor.
   `ElementRef` is a service that grants us direct access to the DOM element
-  through its `nativeElement` property.
-  That's all we need to set the element's background color using the browser DOM API.
+  through its `nativeElement` property and with `Renderer` we can set the element style.
 
 .l-main-section
 a#apply-directive