refactor: remove renderer usages (#8235)

Removes any usages of the Renderer2 from the codebase. They're no longer necessary after Angular switched to Domino which is closer to the native DOM API.

Author: crisbeto

guides/creating-a-custom-form-field-control.md

@@ -58,7 +58,7 @@ class MyTelInput {
     tel = tel || new MyTel('', '', '');
     this.parts.setValue({area: tel.area, exchange: tel.exchange, subscriber: tel.subscriber});
   }
-  
+
   constructor(fb: FormBuilder) {
     this.parts =  fb.group({
       'area': '',
@@ -98,7 +98,7 @@ the `MatFormFieldControl` interface, see the
 #### `value`
 
 This property allows someone to set or get the value of our control. Its type should be the same
-type we used for the type parameter when we implemented `MatFormFieldControl`. Since our component 
+type we used for the type parameter when we implemented `MatFormFieldControl`. Since our component
 already has a value property, we don't need to do anything for this one.
 
 #### `stateChanges`
@@ -185,10 +185,9 @@ need to remember to emit on the `stateChanges` stream so change detection can ha
 ```ts
 focused = false;
 
-constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef,
-            renderer: Renderer2) {
+constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) {
   ...
-  fm.monitor(elRef.nativeElement, renderer, true).subscribe(origin => {
+  fm.monitor(elRef.nativeElement, true).subscribe(origin => {
     this.focused = !!origin;
     this.stateChanges.next();
   });
@@ -307,7 +306,7 @@ just need to apply the given IDs to our host element.
 
 ```ts
 @HostBinding('attr.aria-describedby') describedBy = '';
-  
+
 setDescribedByIds(ids: string[]) {
   this.describedBy = ids.join(' ');
 }

src/cdk/a11y/focus-monitor.spec.ts

@@ -1,6 +1,6 @@
 import {TAB} from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
-import {Component, Renderer2} from '@angular/core';
+import {Component} from '@angular/core';
 import {ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {FocusMonitor, FocusOrigin, TOUCH_BUFFER_MS} from './focus-monitor';
@@ -378,9 +378,7 @@ describe('cdkMonitorFocus', () => {
 @Component({
   template: `<button>focus me!</button>`
 })
-class PlainButton {
-  constructor(public renderer: Renderer2) {}
-}
+class PlainButton {}
 
 
 @Component({

src/cdk/overlay/overlay-directives.ts

@@ -21,7 +21,6 @@ import {
   OnDestroy,
   Optional,
   Output,
-  Renderer2,
   SimpleChanges,
   TemplateRef,
   ViewContainerRef,
@@ -36,6 +35,7 @@ import {
 } from './position/connected-position';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {RepositionScrollStrategy, ScrollStrategy} from './scroll/index';
+import {DOCUMENT} from '@angular/common';
 
 
 /** Default set of positions for the overlay. Follows the behavior of a dropdown. */
@@ -97,7 +97,6 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _offsetX: number = 0;
   private _offsetY: number = 0;
   private _position: ConnectedPositionStrategy;
-  private _escapeListener = () => {};
 
   /** Origin for the connected overlay. */
   @Input('cdkConnectedOverlayOrigin') origin: CdkOverlayOrigin;
@@ -230,11 +229,11 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
   constructor(
       private _overlay: Overlay,
-      private _renderer: Renderer2,
       templateRef: TemplateRef<any>,
       viewContainerRef: ViewContainerRef,
       @Inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy,
-      @Optional() private _dir: Directionality) {
+      @Optional() private _dir: Directionality,
+      @Optional() @Inject(DOCUMENT) private _document: any) {
     this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
   }
 
@@ -335,7 +334,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
     this._position.withDirection(this.dir);
     this._overlayRef.getConfig().direction = this.dir;
-    this._initEscapeListener();
+    this._document.addEventListener('keydown', this._escapeListener);
 
     if (!this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._templatePortal);
@@ -357,7 +356,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     }
 
     this._backdropSubscription.unsubscribe();
-    this._escapeListener();
+    this._document.removeEventListener('keydown', this._escapeListener);
   }
 
   /** Destroys the overlay created by this directive. */
@@ -368,15 +367,13 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
     this._backdropSubscription.unsubscribe();
     this._positionSubscription.unsubscribe();
-    this._escapeListener();
+    this._document.removeEventListener('keydown', this._escapeListener);
   }
 
-  /** Sets the event listener that closes the overlay when pressing Escape. */
-  private _initEscapeListener() {
-    this._escapeListener = this._renderer.listen('document', 'keydown', (event: KeyboardEvent) => {
-      if (event.keyCode === ESCAPE) {
-        this._detachOverlay();
-      }
-    });
+  /** Event listener that will close the overlay when the user presses escape. */
+  private _escapeListener = (event: KeyboardEvent) => {
+    if (event.keyCode === ESCAPE) {
+      this._detachOverlay();
+    }
   }
 }

src/cdk/overlay/position/connected-position-strategy.spec.ts

@@ -592,7 +592,7 @@ describe('ConnectedPositionStrategy', () => {
           {overlayX: 'start', overlayY: 'top'});
 
       strategy.withScrollableContainers([
-          new CdkScrollable(new FakeElementRef(scrollable), null!, null!, null!)]);
+          new CdkScrollable(new FakeElementRef(scrollable), null!, null!)]);
       strategy.attach(fakeOverlayRef(overlayElement));
       positionChangeHandler = jasmine.createSpy('positionChangeHandler');
       onPositionChangeSubscription = strategy.onPositionChange.subscribe(positionChangeHandler);

src/cdk/scrolling/scrollable.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, OnInit, OnDestroy, NgZone, Renderer2} from '@angular/core';
+import {Directive, ElementRef, OnInit, OnDestroy, NgZone} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {ScrollDispatcher} from './scroll-dispatcher';
@@ -22,18 +22,15 @@ import {ScrollDispatcher} from './scroll-dispatcher';
 })
 export class CdkScrollable implements OnInit, OnDestroy {
   private _elementScrolled: Subject<Event> = new Subject();
-  private _scrollListener: Function | null;
+  private _scrollListener = (event: Event) => this._elementScrolled.next(event);
 
   constructor(private _elementRef: ElementRef,
               private _scroll: ScrollDispatcher,
-              private _ngZone: NgZone,
-              private _renderer: Renderer2) {}
+              private _ngZone: NgZone) {}
 
   ngOnInit() {
-    this._scrollListener = this._ngZone.runOutsideAngular(() => {
-      return this._renderer.listen(this.getElementRef().nativeElement, 'scroll', (event: Event) => {
-        this._elementScrolled.next(event);
-      });
+    this._ngZone.runOutsideAngular(() => {
+      this.getElementRef().nativeElement.addEventListener('scroll', this._scrollListener);
     });
 
     this._scroll.register(this);
@@ -43,8 +40,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
     this._scroll.deregister(this);
 
     if (this._scrollListener) {
-      this._scrollListener();
-      this._scrollListener = null;
+      this.getElementRef().nativeElement.removeEventListener('scroll', this._scrollListener);
     }
   }
 

src/cdk/table/cell.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ContentChild, Directive, ElementRef, Input, Renderer2, TemplateRef} from '@angular/core';
+import {ContentChild, Directive, ElementRef, Input, TemplateRef} from '@angular/core';
 
 /**
  * Cell definition for a CDK table.
@@ -64,8 +64,8 @@ export class CdkColumnDef {
   },
 })
 export class CdkHeaderCell {
-  constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2) {
-    renderer.addClass(elementRef.nativeElement, `cdk-column-${columnDef.cssClassFriendlyName}`);
+  constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
+    elementRef.nativeElement.classList.add(`cdk-column-${columnDef.cssClassFriendlyName}`);
   }
 }
 
@@ -78,7 +78,7 @@ export class CdkHeaderCell {
   },
 })
 export class CdkCell {
-  constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2) {
-    renderer.addClass(elementRef.nativeElement, `cdk-column-${columnDef.cssClassFriendlyName}`);
+  constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
+    elementRef.nativeElement.classList.add(`cdk-column-${columnDef.cssClassFriendlyName}`);
   }
 }

src/cdk/table/table.ts

@@ -23,7 +23,6 @@ import {
   IterableDiffers,
   NgIterable,
   QueryList,
-  Renderer2,
   TrackByFunction,
   ViewChild,
   ViewContainerRef,
@@ -170,10 +169,10 @@ export class CdkTable<T> implements CollectionViewer {
   constructor(private readonly _differs: IterableDiffers,
               private readonly _changeDetectorRef: ChangeDetectorRef,
               elementRef: ElementRef,
-              renderer: Renderer2,
               @Attribute('role') role: string) {
+
     if (!role) {
-      renderer.setAttribute(elementRef.nativeElement, 'role', 'grid');
+      elementRef.nativeElement.setAttribute('role', 'grid');
     }
   }
 

src/demo-app/demo-app/demo-app.ts

@@ -7,7 +7,7 @@
  */
 
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {Component, ElementRef, Renderer2, ViewEncapsulation} from '@angular/core';
+import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
 
 /**
  * The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
@@ -91,7 +91,6 @@ export class DemoApp {
 
   constructor(
     private _element: ElementRef,
-    private _renderer: Renderer2,
     private _overlayContainer: OverlayContainer) {}
 
   toggleFullscreen() {
@@ -113,10 +112,10 @@ export class DemoApp {
     this.dark = !this.dark;
 
     if (this.dark) {
-      this._renderer.addClass(this._element.nativeElement, darkThemeClass);
+      this._element.nativeElement.classList.add(darkThemeClass);
       this._overlayContainer.getContainerElement().classList.add(darkThemeClass);
     } else {
-      this._renderer.removeClass(this._element.nativeElement, darkThemeClass);
+      this._element.nativeElement.classList.remove(darkThemeClass);
       this._overlayContainer.getContainerElement().classList.remove(darkThemeClass);
     }
   }

src/lib/button/button.ts

@@ -17,7 +17,6 @@ import {
   Inject,
   OnDestroy,
   Optional,
-  Renderer2,
   Self,
   ViewEncapsulation,
 } from '@angular/core';
@@ -104,7 +103,7 @@ export class MatMiniFab {
 // Boilerplate for applying mixins to MatButton.
 /** @docs-private */
 export class MatButtonBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase)));
 
@@ -136,11 +135,10 @@ export class MatButton extends _MatButtonMixinBase
   /** Whether the button is icon button. */
   _isIconButton: boolean = this._hasHostAttributes('mat-icon-button');
 
-  constructor(renderer: Renderer2,
-              elementRef: ElementRef,
+  constructor(elementRef: ElementRef,
               private _platform: Platform,
               private _focusMonitor: FocusMonitor) {
-    super(renderer, elementRef);
+    super(elementRef);
     this._focusMonitor.monitor(this._elementRef.nativeElement, true);
   }
 
@@ -198,9 +196,8 @@ export class MatAnchor extends MatButton {
   constructor(
       platform: Platform,
       focusMonitor: FocusMonitor,
-      elementRef: ElementRef,
-      renderer: Renderer2) {
-    super(renderer, elementRef, platform, focusMonitor);
+      elementRef: ElementRef) {
+    super(elementRef, platform, focusMonitor);
   }
 
   _haltDisabledEvents(event: Event) {

src/lib/checkbox/checkbox.ts

@@ -20,7 +20,6 @@ import {
   Input,
   OnDestroy,
   Output,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -79,7 +78,7 @@ export class MatCheckboxChange {
 // Boilerplate for applying mixins to MatCheckbox.
 /** @docs-private */
 export class MatCheckboxBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatCheckboxMixinBase =
   mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));
@@ -197,13 +196,11 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   /** Reference to the focused state ripple. */
   private _focusRipple: RippleRef | null;
 
-  constructor(renderer: Renderer2,
-              elementRef: ElementRef,
+  constructor(elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
               private _focusMonitor: FocusMonitor,
               @Attribute('tabindex') tabIndex: string) {
-    super(renderer, elementRef);
-
+    super(elementRef);
     this.tabIndex = parseInt(tabIndex) || 0;
   }
 
@@ -309,22 +306,21 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
   private _transitionCheckState(newState: TransitionCheckState) {
     let oldState = this._currentCheckState;
-    let renderer = this._renderer;
-    let elementRef = this._elementRef;
+    let element: HTMLElement = this._elementRef.nativeElement;
 
     if (oldState === newState) {
       return;
     }
     if (this._currentAnimationClass.length > 0) {
-      renderer.removeClass(elementRef.nativeElement, this._currentAnimationClass);
+      element.classList.remove(this._currentAnimationClass);
     }
 
     this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(
         oldState, newState);
     this._currentCheckState = newState;
 
     if (this._currentAnimationClass.length > 0) {
-      renderer.addClass(elementRef.nativeElement, this._currentAnimationClass);
+      element.classList.add(this._currentAnimationClass);
     }
   }