diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts index 7e81cb736f..4cacc0d22e 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts +++ b/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'; } } diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts index aa8f08752d..6b2101b543 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts +++ b/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 diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts index 618ac3ade3..5f5c33b0db 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts +++ b/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 diff --git a/public/docs/_examples/ngmodule/ts/app/contact/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/app/contact/highlight.directive.ts index f8ab63014f..64338b1377 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/highlight.directive.ts +++ b/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}`); } diff --git a/public/docs/_examples/ngmodule/ts/app/hero/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/app/hero/highlight.directive.ts index d124f4aa00..d7e39afd05 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/highlight.directive.ts +++ b/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}`); } } diff --git a/public/docs/_examples/ngmodule/ts/app/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/app/highlight.directive.ts index d8d7b21896..df67a3ae89 100644 --- a/public/docs/_examples/ngmodule/ts/app/highlight.directive.ts +++ b/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}`); } diff --git a/public/docs/_examples/ngmodule/ts/app/shared/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/app/shared/highlight.directive.ts index 2fed35ccc8..63fbd4e488 100644 --- a/public/docs/_examples/ngmodule/ts/app/shared/highlight.directive.ts +++ b/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}`); } diff --git a/public/docs/_examples/style-guide/ts/02-08/app/shared/input-highlight.directive.ts b/public/docs/_examples/style-guide/ts/02-08/app/shared/input-highlight.directive.ts index e9033a9627..fd74771981 100644 --- a/public/docs/_examples/style-guide/ts/02-08/app/shared/input-highlight.directive.ts +++ b/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'; } } diff --git a/public/docs/_examples/testing/ts/app/about.component.spec.ts b/public/docs/_examples/testing/ts/app/about.component.spec.ts index dbc7361823..0909e74434 100644 --- a/public/docs/_examples/testing/ts/app/about.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/about.component.spec.ts @@ -20,7 +20,8 @@ describe('AboutComponent (highlightDirective)', () => { it('should have skyblue

', () => { 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 }); diff --git a/public/docs/_examples/testing/ts/app/bag/bag.spec.ts b/public/docs/_examples/testing/ts/app/bag/bag.spec.ts index d67bf66fd0..107ff2f146 100644 --- a/public/docs/_examples/testing/ts/app/bag/bag.spec.ts +++ b/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:', () => { diff --git a/public/docs/_examples/testing/ts/app/bag/bag.ts b/public/docs/_examples/testing/ts/app/bag/bag.ts index 0dc4453e77..55731e33bd 100644 --- a/public/docs/_examples/testing/ts/app/bag/bag.ts +++ b/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 */ diff --git a/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts b/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts index 6c219ab808..b990f20b69 100644 --- a/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts +++ b/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts @@ -44,12 +44,14 @@ describe('HighlightDirective', () => { }); it('should color 1st

background "yellow"', () => { - expect(des[0].styles['backgroundColor']).toBe('yellow'); + const bgColor = des[0].nativeElement.style.backgroundColor; + expect(bgColor).toBe('yellow'); }); it('should color 2nd

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

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

', () => { diff --git a/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts b/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts index 4a45c8d5aa..20901878c4 100644 --- a/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts +++ b/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; } } diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index 7375c6aa66..911e815b02 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/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 diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade index e85bb41fc3..db9555431e 100644 --- a/public/docs/ts/latest/guide/testing.jade +++ b/public/docs/ts/latest/guide/testing.jade @@ -1578,13 +1578,16 @@ figure.image-display in `By.css('h2:not([highlight])')` helps find `

` 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 `

` 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,49 +2216,50 @@ table +makeExample('testing/ts/app/hero/hero-list.component.spec.ts', 'by', 'app/hero/hero-list.component.spec.ts')(format=".") -#renderer-tests -:marked - Many custom application directives inject the `Renderer` and call one of its `set...` methods. - - The test environment substitutes the `DebugDomRender` for the runtime `Renderer`. - The `DebugDomRender` updates additional dictionary properties of the `DebugElement` - when something calls a `set...` method. - - These dictionary properties are primarily of interest to authors of Angular DOM inspection tools - but they may provide useful insights to testers as well. +// 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. -table - tr - th Dictionary - th Description - tr - td(style="vertical-align: top") properties - td - :marked - Updated by `Renderer.setElementProperty`. - Many Angular directives call it, including `NgModel`. - tr - td(style="vertical-align: top") attributes - td - :marked - Updated by `Renderer.setElementAttribute`. - Angular `[attribute]` bindings call it. - tr - td(style="vertical-align: top") classes - td - :marked - Updated by `Renderer.setElementClass`. - Angular `[class]` bindings call it. - tr - td(style="vertical-align: top") styles - td - :marked - Updated by `Renderer.setElementStyle`. - Angular `[style]` bindings call it. -:marked - Here's an example of `Renderer` tests from the live "Specs Bag" sample. + The test environment substitutes the `DebugDomRender` for the runtime `Renderer`. + The `DebugDomRender` updates additional dictionary properties of the `DebugElement` + when something calls a `set...` method. + + These dictionary properties are primarily of interest to authors of Angular DOM inspection tools + but they may provide useful insights to testers as well. + + table + tr + th Dictionary + th Description + tr + td(style="vertical-align: top") properties + td + :marked + Updated by `Renderer.setElementProperty`. + Many Angular directives call it, including `NgModel`. + tr + td(style="vertical-align: top") attributes + td + :marked + Updated by `Renderer.setElementAttribute`. + Angular `[attribute]` bindings call it. + tr + td(style="vertical-align: top") classes + td + :marked + Updated by `Renderer.setElementClass`. + Angular `[class]` bindings call it. + tr + td(style="vertical-align: top") styles + td + :marked + Updated by `Renderer.setElementStyle`. + Angular `[style]` bindings call it. + :marked + Here's an example of `Renderer` tests from the live "Specs Bag" sample. -+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