Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit c3ab91b

Browse files
kapunahelewongwardbell
kapunahelewong
authored and
wardbell
committed
docs(renderer): remove renderer
1 parent 93c78da commit c3ab91b

File tree

15 files changed

+107
-94
lines changed

15 files changed

+107
-94
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/* tslint:disable:no-unused-variable */
22
// #docregion
3-
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
3+
import { Directive, ElementRef, Input } from '@angular/core';
44

55
@Directive({ selector: '[myHighlight]' })
66
export class HighlightDirective {
7-
constructor(el: ElementRef, renderer: Renderer) {
8-
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
7+
constructor(el: ElementRef) {
8+
el.nativeElement.style.backgroundColor = 'yellow';
99
}
1010
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* tslint:disable:no-unused-variable */
22
// #docregion
3-
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
3+
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
44

55
@Directive({
66
selector: '[myHighlight]'
77
})
88

99
export class HighlightDirective {
1010
// #docregion ctor
11-
constructor(private el: ElementRef, private renderer: Renderer) { }
11+
constructor(private el: ElementRef) { }
1212
// #enddocregion ctor
1313

1414
// #docregion mouse-methods, host
@@ -26,7 +26,7 @@ export class HighlightDirective {
2626
// #enddocregion host
2727

2828
private highlight(color: string) {
29-
this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
29+
this.el.nativeElement.style.backgroundColor = 'yellow';
3030
}
3131
// #enddocregion mouse-methods
3232

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
/* tslint:disable:member-ordering */
12
// #docplaster
23
// #docregion full
3-
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
4+
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
45

56
@Directive({
67
selector: '[myHighlight]'
@@ -9,7 +10,7 @@ import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/c
910
export class HighlightDirective {
1011
private _defaultColor = 'red';
1112

12-
constructor(private el: ElementRef, private renderer: Renderer) { }
13+
constructor(private el: ElementRef) { }
1314
// #enddocregion class
1415

1516
// #docregion defaultColor
@@ -33,7 +34,7 @@ export class HighlightDirective {
3334
}
3435

3536
private highlight(color: string) {
36-
this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
37+
this.el.nativeElement.style.backgroundColor = color;
3738
}
3839
}
3940
// #enddocregion class

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
// and it highlights in blue instead of gold
66

77
// #docregion
8-
import { Directive, ElementRef, Renderer } from '@angular/core';
8+
import { Directive, ElementRef } from '@angular/core';
99

1010
@Directive({ selector: '[highlight], input' })
1111
/** Highlight the attached element or an InputElement in blue */
1212
export class HighlightDirective {
13-
constructor(renderer: Renderer, el: ElementRef) {
14-
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'powderblue');
13+
constructor(el: ElementRef) {
14+
el.nativeElement.style.backgroundColor = 'powderblue';
1515
console.log(
1616
`* Contact highlight called for ${el.nativeElement.tagName}`);
1717
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// #docregion
2-
import { Directive, ElementRef, Renderer } from '@angular/core';
2+
import { Directive, ElementRef } from '@angular/core';
33

44
// Same directive name and selector as
55
// HighlightDirective in parent AppRootModule
66
// It selects for both input boxes and 'highlight' attr
77
// and it highlights in beige instead of yellow
88
@Directive({ selector: '[highlight]' })
99
export class HighlightDirective {
10-
constructor(renderer: Renderer, el: ElementRef) {
11-
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'beige');
10+
constructor(el: ElementRef) {
11+
el.nativeElement.style.backgroundColor = 'beige';
1212
console.log(`* Hero highlight called for ${el.nativeElement.tagName}`);
1313
}
1414
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// #docregion
2-
import { Directive, ElementRef, Renderer } from '@angular/core';
2+
import { Directive, ElementRef } from '@angular/core';
33

44
@Directive({ selector: '[highlight]' })
55
/** Highlight the attached element in gold */
66
export class HighlightDirective {
7-
constructor(renderer: Renderer, el: ElementRef) {
8-
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'gold');
7+
constructor(el: ElementRef) {
8+
el.nativeElement.style.backgroundColor = 'gold';
99
console.log(
1010
`* AppRoot highlight called for ${el.nativeElement.tagName}`);
1111
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/* tslint:disable */
22
// Exact copy of contact/highlight.directive except for color and message
3-
import { Directive, ElementRef, Renderer } from '@angular/core';
3+
import { Directive, ElementRef } from '@angular/core';
44

55
@Directive({ selector: '[highlight], input' })
66
/** Highlight the attached element or an InputElement in gray */
77
export class HighlightDirective {
8-
constructor(renderer: Renderer, el: ElementRef) {
9-
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'lightgray');
8+
constructor(el: ElementRef) {
9+
el.nativeElement.style.backgroundColor = 'lightgray';
1010
console.log(
1111
`* Shared highlight called for ${el.nativeElement.tagName}`);
1212
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// #docregion
2-
import { Directive, ElementRef, Renderer } from '@angular/core';
2+
import { Directive, ElementRef } from '@angular/core';
33

44
@Directive({ selector: 'input'})
55
/** Highlight the attached input text element in blue */
66
export class InputHighlightDirective {
7-
constructor(renderer: Renderer, el: ElementRef) {
8-
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'powderblue');
7+
constructor(el: ElementRef) {
8+
el.nativeElement.style.backgroundColor = 'powderblue';
99
}
1010
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ describe('AboutComponent (highlightDirective)', () => {
2020

2121
it('should have skyblue <h2>', () => {
2222
const de = fixture.debugElement.query(By.css('h2'));
23-
expect(de.styles['backgroundColor']).toBe('skyblue');
23+
const bgColor = de.nativeElement.style.backgroundColor;
24+
expect(bgColor).toBe('skyblue');
2425
});
2526
// #enddocregion tests
2627
});

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -332,8 +332,8 @@ describe('TestBed Component Tests', () => {
332332
expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
333333
});
334334

335-
// #docregion debug-dom-renderer
336-
it('DebugDomRender should set attributes, styles, classes, and properties', () => {
335+
// #docregion dom-attributes
336+
it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
337337
const fixture = TestBed.createComponent(BankAccountParentComponent);
338338
fixture.detectChanges();
339339
const comp = fixture.componentInstance;
@@ -351,12 +351,18 @@ describe('TestBed Component Tests', () => {
351351
expect(el.classes['closed']).toBe(true, 'closed class');
352352
expect(el.classes['open']).toBe(false, 'open class');
353353

354-
expect(el.properties['customProperty']).toBe(true, 'customProperty');
355-
356354
expect(el.styles['color']).toBe(comp.color, 'color style');
357355
expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
356+
// #enddocregion dom-attributes
357+
358+
// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
359+
// expect(el.properties['customProperty']).toBe(true, 'customProperty');
360+
361+
// #docregion dom-attributes
358362
});
359-
// #enddocregion debug-dom-renderer
363+
// #enddocregion dom-attributes
364+
365+
360366
});
361367

362368
describe('TestBed Component Overrides:', () => {

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Component, ContentChildren, Directive, ElementRef, EventEmitter,
44
HostBinding, HostListener,
55
OnInit, OnChanges, OnDestroy,
66
Pipe, PipeTransform,
7-
Renderer, SimpleChange } from '@angular/core';
7+
SimpleChange } from '@angular/core';
88

99
import { Observable } from 'rxjs/Observable';
1010
import 'rxjs/add/observable/of';
@@ -76,9 +76,10 @@ export class BankAccountComponent {
7676
@Input() bank: string;
7777
@Input('account') id: string;
7878

79-
constructor(private renderer: Renderer, private el: ElementRef ) {
80-
renderer.setElementProperty(el.nativeElement, 'customProperty', true);
81-
}
79+
// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
80+
// constructor(private renderer: Renderer, private el: ElementRef ) {
81+
// renderer.setElementProperty(el.nativeElement, 'customProperty', true);
82+
// }
8283
}
8384

8485
/** A component with attributes, styles, classes, and property setting */

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,14 @@ describe('HighlightDirective', () => {
4444
});
4545

4646
it('should color 1st <h2> background "yellow"', () => {
47-
expect(des[0].styles['backgroundColor']).toBe('yellow');
47+
const bgColor = des[0].nativeElement.style.backgroundColor;
48+
expect(bgColor).toBe('yellow');
4849
});
4950

5051
it('should color 2nd <h2> background w/ default color', () => {
5152
const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
52-
expect(des[1].styles['backgroundColor']).toBe(dir.defaultColor);
53+
const bgColor = des[1].nativeElement.style.backgroundColor;
54+
expect(bgColor).toBe(dir.defaultColor);
5355
});
5456

5557
it('should bind <input> background to value color', () => {
@@ -65,17 +67,19 @@ describe('HighlightDirective', () => {
6567
expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
6668
});
6769

68-
// customProperty tests
69-
it('all highlighted elements should have a true customProperty', () => {
70-
const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
71-
expect(allTrue).toBe(true);
72-
});
7370

7471
it('bare <h2> should not have a customProperty', () => {
7572
expect(bareH2.properties['customProperty']).toBeUndefined();
7673
});
7774
// #enddocregion selected-tests
7875

76+
// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
77+
// // customProperty tests
78+
// it('all highlighted elements should have a true customProperty', () => {
79+
// const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
80+
// expect(allTrue).toBe(true);
81+
// });
82+
7983
// injected directive
8084
// attached HighlightDirective can be injected
8185
it('can inject `HighlightDirective` in 1st <h2>', () => {

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// #docregion
2-
import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core';
2+
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
33

44
@Directive({ selector: '[highlight]' })
55
/** Set backgroundColor for the attached element to highlight color
@@ -10,13 +10,11 @@ export class HighlightDirective implements OnChanges {
1010

1111
@Input('highlight') bgColor: string;
1212

13-
constructor(private renderer: Renderer, private el: ElementRef) {
14-
renderer.setElementProperty(el.nativeElement, 'customProperty', true);
13+
constructor(private el: ElementRef) {
14+
el.nativeElement.style.customProperty = true;
1515
}
1616

1717
ngOnChanges() {
18-
this.renderer.setElementStyle(
19-
this.el.nativeElement, 'backgroundColor',
20-
this.bgColor || this.defaultColor );
18+
this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
2119
}
2220
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ block highlight-directive-1
7878
1. `ElementRef` [injects](dependency-injection.html) into the directive's constructor
7979
so the code can access the DOM element.
8080
1. `Input` allows data to flow from the binding expression into the directive.
81-
1. `Renderer` allows the code to change the DOM element's style.
8281

8382
Next, the `@Directive` decorator function contains the directive metadata in a configuration object
8483
as an argument.
@@ -107,10 +106,10 @@ p
107106
| Exporting #[code HighlightDirective] makes it accessible to other components.
108107
:marked
109108
Angular creates a new instance of the directive's controller class for
110-
each matching element, injecting an Angular `ElementRef` and `Renderer`
109+
each matching element, injecting an Angular `ElementRef`
111110
into the constructor.
112111
`ElementRef` is a service that grants direct access to the DOM element
113-
through its `nativeElement` property and `Renderer` allows the code to set the element style.
112+
through its `nativeElement` property.
114113

115114
.l-main-section
116115
a#apply-directive

0 commit comments

Comments
 (0)