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.

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,14 +306,13 @@ 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(
@@ -324,7 +320,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
     this._currentCheckState = newState;
 
     if (this._currentAnimationClass.length > 0) {
-      renderer.addClass(elementRef.nativeElement, this._currentAnimationClass);
+      element.classList.add(this._currentAnimationClass);
     }
   }
 

src/lib/chips/chip-list.ts

@@ -26,7 +26,6 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   Self,
   ViewEncapsulation,
 } from '@angular/core';
@@ -311,8 +310,7 @@ export class MatChipList implements MatFormFieldControl<any>, ControlValueAccess
   /** The chip components contained within this chip list. */
   @ContentChildren(MatChip) chips: QueryList<MatChip>;
 
-  constructor(protected _renderer: Renderer2,
-              protected _elementRef: ElementRef,
+  constructor(protected _elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
               @Optional() private _dir: Directionality,
               @Optional() private _parentForm: NgForm,
@@ -392,7 +390,7 @@ export class MatChipList implements MatFormFieldControl<any>, ControlValueAccess
   // Implemented as part of ControlValueAccessor
   setDisabledState(disabled: boolean): void {
     this.disabled = disabled;
-    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', disabled);
+    this._elementRef.nativeElement.disabled = disabled;
     this.stateChanges.next();
   }
 

src/lib/chips/chip.ts

@@ -16,7 +16,6 @@ import {
   Input,
   OnDestroy,
   Output,
-  Renderer2,
 } from '@angular/core';
 import {CanColor, CanDisable, mixinColor, mixinDisabled} from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
@@ -37,8 +36,7 @@ export class MatChipSelectionChange {
 // Boilerplate for applying mixins to MatChip.
 /** @docs-private */
 export class MatChipBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {
-  }
+  constructor(public _elementRef: ElementRef) {}
 }
 
 export const _MatChipMixinBase = mixinColor(mixinDisabled(MatChipBase), 'primary');
@@ -171,8 +169,8 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
     return this.selectable ? this.selected.toString() : null;
   }
 
-  constructor(renderer: Renderer2, public _elementRef: ElementRef) {
-    super(renderer, _elementRef);
+  constructor(public _elementRef: ElementRef) {
+    super(_elementRef);
   }
 
   ngOnDestroy(): void {

src/lib/core/common-behaviors/color.spec.ts

@@ -1,5 +1,5 @@
 import {mixinColor} from './color';
-import {ElementRef, Renderer2} from '@angular/core';
+import {ElementRef} from '@angular/core';
 
 describe('MixinColor', () => {
 
@@ -72,12 +72,6 @@ describe('MixinColor', () => {
 class TestClass {
   testElement: HTMLElement = document.createElement('div');
 
-  /** Mock of a RendererV2 for the color mixin. */
-  _renderer: Renderer2 = {
-    addClass: (element: HTMLElement, className: string) => element.classList.add(className),
-    removeClass: (element: HTMLElement, className: string) => element.classList.remove(className)
-  } as any;
-
   /** Fake instance of an ElementRef. */
   _elementRef = new ElementRef(this.testElement);
 }

src/lib/core/common-behaviors/color.ts

@@ -7,7 +7,7 @@
  */
 
 import {Constructor} from './constructor';
-import {ElementRef, Renderer2} from '@angular/core';
+import {ElementRef} from '@angular/core';
 
 /** @docs-private */
 export interface CanColor {
@@ -15,8 +15,7 @@ export interface CanColor {
 }
 
 /** @docs-private */
-export interface HasRenderer {
-  _renderer: Renderer2;
+export interface HasElementRef {
   _elementRef: ElementRef;
 }
 
@@ -24,8 +23,8 @@ export interface HasRenderer {
 export type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;
 
 /** Mixin to augment a directive with a `color` property. */
-export function mixinColor<T extends Constructor<HasRenderer>>(base: T, defaultColor?: ThemePalette)
-    : Constructor<CanColor> & T {
+export function mixinColor<T extends Constructor<HasElementRef>>(base: T,
+    defaultColor?: ThemePalette): Constructor<CanColor> & T {
   return class extends base {
     private _color: ThemePalette;
 
@@ -35,10 +34,10 @@ export function mixinColor<T extends Constructor<HasRenderer>>(base: T, defaultC
 
       if (colorPalette !== this._color) {
         if (this._color) {
-          this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`);
+          this._elementRef.nativeElement.classList.remove(`mat-${this._color}`);
         }
         if (colorPalette) {
-          this._renderer.addClass(this._elementRef.nativeElement, `mat-${colorPalette}`);
+          this._elementRef.nativeElement.classList.add(`mat-${colorPalette}`);
         }
 
         this._color = colorPalette;

src/lib/core/line/line.ts

@@ -9,7 +9,6 @@
 import {
   NgModule,
   Directive,
-  Renderer2,
   ElementRef,
   QueryList,
 } from '@angular/core';
@@ -32,8 +31,7 @@ export class MatLine {}
  * @docs-private
  */
 export class MatLineSetter {
-  constructor(private _lines: QueryList<MatLine>, private _renderer: Renderer2,
-              private _element: ElementRef) {
+  constructor(private _lines: QueryList<MatLine>, private _element: ElementRef) {
     this._setLineClass(this._lines.length);
 
     this._lines.changes.subscribe(() => {
@@ -58,9 +56,9 @@ export class MatLineSetter {
 
   private _setClass(className: string, isAdd: boolean): void {
     if (isAdd) {
-      this._renderer.addClass(this._element.nativeElement, className);
+      this._element.nativeElement.classList.add(className);
     } else {
-      this._renderer.removeClass(this._element.nativeElement, className);
+      this._element.nativeElement.classList.remove(className);
     }
   }
 

src/lib/datepicker/datepicker-input.ts

@@ -19,7 +19,6 @@ import {
   OnDestroy,
   Optional,
   Output,
-  Renderer2
 } from '@angular/core';
 import {
   AbstractControl,
@@ -122,8 +121,8 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
     value = this._getValidDateOrNull(value);
     let oldDate = this.value;
     this._value = value;
-    this._renderer.setProperty(this._elementRef.nativeElement, 'value',
-        value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '');
+    this._elementRef.nativeElement.value =
+        value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
     if (!this._dateAdapter.sameDate(oldDate, value)) {
       this._valueChange.emit(value);
     }
@@ -222,7 +221,6 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
 
   constructor(
       private _elementRef: ElementRef,
-      private _renderer: Renderer2,
       @Optional() private _dateAdapter: DateAdapter<D>,
       @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
       @Optional() private _formField: MatFormField) {

src/lib/form-field/form-field.ts

@@ -23,7 +23,7 @@ import {
   Inject,
   Input,
   Optional,
-  QueryList, Renderer2,
+  QueryList,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -163,7 +163,6 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
 
   constructor(
       public _elementRef: ElementRef,
-      private _renderer: Renderer2,
       private _changeDetectorRef: ChangeDetectorRef,
       @Optional() @Inject(MAT_PLACEHOLDER_GLOBAL_OPTIONS) placeholderOptions: PlaceholderOptions) {
     this._placeholderOptions = placeholderOptions ? placeholderOptions : {};
@@ -173,8 +172,8 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
   ngAfterContentInit() {
     this._validateControlChild();
     if (this._control.controlType) {
-      this._renderer.addClass(
-          this._elementRef.nativeElement, `mat-form-field-type-${this._control.controlType}`);
+      this._elementRef.nativeElement.classList
+          .add(`mat-form-field-type-${this._control.controlType}`);
     }
 
     // Subscribe to changes in the child control state in order to update the form field UI.

src/lib/grid-list/grid-list.ts

@@ -14,7 +14,6 @@ import {
   Input,
   ContentChildren,
   QueryList,
-  Renderer2,
   ElementRef,
   Optional,
   ChangeDetectionStrategy,
@@ -69,10 +68,7 @@ export class MatGridList implements OnInit, AfterContentChecked {
   /** Query list of tiles that are being rendered. */
   @ContentChildren(MatGridTile) _tiles: QueryList<MatGridTile>;
 
-  constructor(
-      private _renderer: Renderer2,
-      private _element: ElementRef,
-      @Optional() private _dir: Directionality) {}
+  constructor(private _element: ElementRef, @Optional() private _dir: Directionality) {}
 
   /** Amount of columns in the grid list. */
   @Input()
@@ -155,7 +151,7 @@ export class MatGridList implements OnInit, AfterContentChecked {
   /** Sets style on the main grid-list element, given the style name and value. */
   _setListStyle(style: [string, string | null] | null): void {
     if (style) {
-      this._renderer.setStyle(this._element.nativeElement, style[0], style[1]);
+      this._element.nativeElement.style[style[0]] = style[1];
     }
   }
 }

src/lib/grid-list/grid-tile.ts

@@ -9,7 +9,6 @@
 import {
   Component,
   ViewEncapsulation,
-  Renderer2,
   ElementRef,
   Input,
   ContentChildren,
@@ -38,7 +37,7 @@ export class MatGridTile {
   _rowspan: number = 1;
   _colspan: number = 1;
 
-  constructor(private _renderer: Renderer2, private _element: ElementRef) {}
+  constructor(private _element: ElementRef) {}
 
   /** Amount of rows that the grid tile takes up. */
   @Input()
@@ -55,7 +54,7 @@ export class MatGridTile {
    * "Changed after checked" errors that would occur with HostBinding.
    */
   _setStyle(property: string, value: any): void {
-    this._renderer.setStyle(this._element.nativeElement, property, value);
+    this._element.nativeElement.style[property] = value;
   }
 }
 
@@ -75,10 +74,10 @@ export class MatGridTileText implements AfterContentInit {
   _lineSetter: MatLineSetter;
   @ContentChildren(MatLine) _lines: QueryList<MatLine>;
 
-  constructor(private _renderer: Renderer2, private _element: ElementRef) {}
+  constructor(private _element: ElementRef) {}
 
   ngAfterContentInit() {
-    this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element);
+    this._lineSetter = new MatLineSetter(this._lines, this._element);
   }
 }
 

src/lib/icon/icon.ts

@@ -15,7 +15,6 @@ import {
   Input,
   OnChanges,
   OnInit,
-  Renderer2,
   SimpleChanges,
   ViewEncapsulation,
 } from '@angular/core';
@@ -26,7 +25,7 @@ import {MatIconRegistry} from './icon-registry';
 // Boilerplate for applying mixins to MatIcon.
 /** @docs-private */
 export class MatIconBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatIconMixinBase = mixinColor(MatIconBase);
 
@@ -88,16 +87,15 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
   private _previousFontIconClass: string;
 
   constructor(
-      renderer: Renderer2,
       elementRef: ElementRef,
       private _iconRegistry: MatIconRegistry,
       @Attribute('aria-hidden') ariaHidden: string) {
-    super(renderer, elementRef);
+    super(elementRef);
 
     // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
     // the right thing to do for the majority of icon use-cases.
     if (!ariaHidden) {
-      renderer.setAttribute(elementRef.nativeElement, 'aria-hidden', 'true');
+      elementRef.nativeElement.setAttribute('aria-hidden', 'true');
     }
   }
 
@@ -160,17 +158,17 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
 
   private _setSvgElement(svg: SVGElement) {
     this._clearSvgElement();
-    this._renderer.appendChild(this._elementRef.nativeElement, svg);
+    this._elementRef.nativeElement.appendChild(svg);
   }
 
   private _clearSvgElement() {
-    const layoutElement = this._elementRef.nativeElement;
+    const layoutElement: HTMLElement = this._elementRef.nativeElement;
     const childCount = layoutElement.childNodes.length;
 
     // Remove existing child nodes and add the new SVG element. Note that we can't
     // use innerHTML, because IE will throw if the element has a data binding.
     for (let i = 0; i < childCount; i++) {
-      this._renderer.removeChild(layoutElement, layoutElement.childNodes[i]);
+      layoutElement.removeChild(layoutElement.childNodes[i]);
     }
   }
 
@@ -179,27 +177,27 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
       return;
     }
 
-    const elem = this._elementRef.nativeElement;
+    const elem: HTMLElement = this._elementRef.nativeElement;
     const fontSetClass = this.fontSet ?
         this._iconRegistry.classNameForFontAlias(this.fontSet) :
         this._iconRegistry.getDefaultFontSetClass();
 
     if (fontSetClass != this._previousFontSetClass) {
       if (this._previousFontSetClass) {
-        this._renderer.removeClass(elem, this._previousFontSetClass);
+        elem.classList.remove(this._previousFontSetClass);
       }
       if (fontSetClass) {
-        this._renderer.addClass(elem, fontSetClass);
+        elem.classList.add(fontSetClass);
       }
       this._previousFontSetClass = fontSetClass;
     }
 
     if (this.fontIcon != this._previousFontIconClass) {
       if (this._previousFontIconClass) {
-        this._renderer.removeClass(elem, this._previousFontIconClass);
+        elem.classList.remove(this._previousFontIconClass);
       }
       if (this.fontIcon) {
-        this._renderer.addClass(elem, this.fontIcon);
+        elem.classList.add(this.fontIcon);
       }
       this._previousFontIconClass = this.fontIcon;
     }

src/lib/input/input.ts

@@ -17,8 +17,7 @@ import {
   OnChanges,
   OnDestroy,
   Optional,
-  Renderer2,
-  Self
+  Self,
 } from '@angular/core';
 import {FormControl, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
@@ -124,7 +123,7 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
     // input element. To ensure that bindings for `type` work, we need to sync the setter
     // with the native property. Textarea elements don't support the type property or attribute.
     if (!this._isTextarea() && getSupportedInputTypes().has(this._type)) {
-      this._renderer.setProperty(this._elementRef.nativeElement, 'type', this._type);
+      this._elementRef.nativeElement.type = this._type;
     }
   }
 
@@ -156,7 +155,6 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
   ].filter(t => getSupportedInputTypes().has(t));
 
   constructor(protected _elementRef: ElementRef,
-              protected _renderer: Renderer2,
               protected _platform: Platform,
               @Optional() @Self() public ngControl: NgControl,
               @Optional() protected _parentForm: NgForm,
@@ -176,7 +174,7 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
     // key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
     // exists on iOS, we only bother to install the listener on iOS.
     if (_platform.IOS) {
-      _renderer.listen(_elementRef.nativeElement, 'keyup', (event: Event) => {
+      _elementRef.nativeElement.addEventListener('keyup', (event: Event) => {
         let el = event.target as HTMLInputElement;
         if (!el.value && !el.selectionStart && !el.selectionEnd) {
           // Note: Just setting `0, 0` doesn't fix the issue. Setting `1, 1` fixes it for the first

src/lib/list/list.ts

@@ -16,7 +16,6 @@ import {
   ElementRef,
   Optional,
   QueryList,
-  Renderer2,
   ViewEncapsulation,
 } from '@angular/core';
 import {CanDisableRipple, MatLine, MatLineSetter, mixinDisableRipple} from '@angular/material/core';
@@ -144,14 +143,13 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
   @ContentChild(MatListAvatarCssMatStyler)
   set _hasAvatar(avatar: MatListAvatarCssMatStyler) {
     if (avatar != null) {
-      this._renderer.addClass(this._element.nativeElement, 'mat-list-item-avatar');
+      this._element.nativeElement.classList.add('mat-list-item-avatar');
     } else {
-      this._renderer.removeClass(this._element.nativeElement, 'mat-list-item-avatar');
+      this._element.nativeElement.classList.remove('mat-list-item-avatar');
     }
   }
 
-  constructor(private _renderer: Renderer2,
-              private _element: ElementRef,
+  constructor(private _element: ElementRef,
               @Optional() private _list: MatList,
               @Optional() navList: MatNavListCssMatStyler) {
     super();
@@ -159,7 +157,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
   }
 
   ngAfterContentInit() {
-    this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element);
+    this._lineSetter = new MatLineSetter(this._lines, this._element);
   }
 
   /** Whether this list item should show a ripple effect when clicked.  */
@@ -168,11 +166,11 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
   }
 
   _handleFocus() {
-    this._renderer.addClass(this._element.nativeElement, 'mat-list-item-focus');
+    this._element.nativeElement.classList.add('mat-list-item-focus');
   }
 
   _handleBlur() {
-    this._renderer.removeClass(this._element.nativeElement, 'mat-list-item-focus');
+    this._element.nativeElement.classList.remove('mat-list-item-focus');
   }
 
   /** Retrieves the DOM element of the component host. */

src/lib/list/selection-list.ts

@@ -27,7 +27,6 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -125,8 +124,7 @@ export class MatListOption extends _MatListOptionMixinBase
   /** Emitted when the option is selected or deselected. */
   @Output() selectionChange = new EventEmitter<MatListOptionChange>();
 
-  constructor(private _renderer: Renderer2,
-              private _element: ElementRef,
+  constructor(private _element: ElementRef,
               private _changeDetector: ChangeDetectorRef,
               @Optional() @Inject(forwardRef(() => MatSelectionList))
               public selectionList: MatSelectionList) {
@@ -140,7 +138,7 @@ export class MatListOption extends _MatListOptionMixinBase
   }
 
   ngAfterContentInit() {
-    this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element);
+    this._lineSetter = new MatLineSetter(this._lines, this._element);
   }
 
   ngOnDestroy(): void {

src/lib/progress-spinner/progress-spinner.ts

@@ -11,7 +11,6 @@ import {
   ChangeDetectionStrategy,
   Input,
   ElementRef,
-  Renderer2,
   SimpleChanges,
   OnChanges,
   ViewEncapsulation,
@@ -41,7 +40,7 @@ const BASE_STROKE_WIDTH = 10;
 // Boilerplate for applying mixins to MatProgressSpinner.
 /** @docs-private */
 export class MatProgressSpinnerBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary');
 
@@ -151,10 +150,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     }
   }
 
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef,
-              platform: Platform, @Optional() @Inject(DOCUMENT) private _document: any) {
-    super(_renderer, _elementRef);
+  constructor(public _elementRef: ElementRef,
+              platform: Platform,
+              @Optional() @Inject(DOCUMENT) private _document: any) {
 
+    super(_elementRef);
     this._fallbackAnimation = platform.EDGE || platform.TRIDENT;
 
     // On IE and Edge, we can't animate the `stroke-dashoffset`
@@ -162,7 +162,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     const animationClass =
       `mat-progress-spinner-indeterminate${this._fallbackAnimation ? '-fallback' : ''}-animation`;
 
-    _renderer.addClass(_elementRef.nativeElement, animationClass);
+    _elementRef.nativeElement.classList.add(animationClass);
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -211,8 +211,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     let styleTag = MatProgressSpinner.styleTag;
 
     if (!styleTag) {
-      styleTag = this._renderer.createElement('style');
-      this._renderer.appendChild(this._document.head, styleTag);
+      styleTag = this._document.createElement('style');
+      this._document.head.appendChild(styleTag);
       MatProgressSpinner.styleTag = styleTag;
     }
 
@@ -258,9 +258,9 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   preserveWhitespaces: false,
 })
 export class MatSpinner extends MatProgressSpinner {
-  constructor(renderer: Renderer2, elementRef: ElementRef, platform: Platform,
+  constructor(elementRef: ElementRef, platform: Platform,
               @Optional() @Inject(DOCUMENT) document: any) {
-    super(renderer, elementRef, platform, document);
+    super(elementRef, platform, document);
     this.mode = 'indeterminate';
   }
 }

src/lib/radio/radio.ts

@@ -26,7 +26,6 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -315,7 +314,7 @@ export class MatRadioGroup extends _MatRadioGroupMixinBase
 // Boilerplate for applying mixins to MatRadioButton.
 /** @docs-private */
 export class MatRadioButtonBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 // As per Material design specifications the selection control radio should use the accent color
 // palette by default. https://material.io/guidelines/components/selection-controls.html
@@ -494,11 +493,10 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
 
   constructor(@Optional() radioGroup: MatRadioGroup,
               elementRef: ElementRef,
-              renderer: Renderer2,
               private _changeDetector: ChangeDetectorRef,
               private _focusMonitor: FocusMonitor,
               private _radioDispatcher: UniqueSelectionDispatcher) {
-    super(renderer, elementRef);
+    super(elementRef);
 
     // Assertions. Ideally these should be stripped out by the compiler.
     // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
@@ -538,7 +536,8 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
   }
 
   ngAfterViewInit() {
-    this._focusMonitor.monitor(this._inputElement.nativeElement, false)
+    this._focusMonitor
+      .monitor(this._inputElement.nativeElement, false)
       .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
   }
 

src/lib/select/select.ts

@@ -46,7 +46,6 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   Self,
   SimpleChanges,
   ViewChild,
@@ -143,7 +142,7 @@ export class MatSelectChange {
 // Boilerplate for applying mixins to MatSelect.
 /** @docs-private */
 export class MatSelectBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatSelectMixinBase = mixinTabIndex(mixinDisabled(MatSelectBase));
 
@@ -453,7 +452,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     private _changeDetectorRef: ChangeDetectorRef,
     private _ngZone: NgZone,
     private _defaultErrorStateMatcher: ErrorStateMatcher,
-    renderer: Renderer2,
     elementRef: ElementRef,
     @Optional() private _dir: Directionality,
     @Optional() private _parentForm: NgForm,
@@ -463,7 +461,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     @Attribute('tabindex') tabIndex: string,
     @Inject(MAT_SELECT_SCROLL_STRATEGY) private _scrollStrategyFactory) {
 
-    super(renderer, elementRef);
+    super(elementRef);
 
     if (this.ngControl) {
       this.ngControl.valueAccessor = this;

src/lib/sidenav/drawer.ts

@@ -27,7 +27,6 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   ViewEncapsulation,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
@@ -435,8 +434,7 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
   _contentMargins = new Subject<{left: number, right: number}>();
 
   constructor(@Optional() private _dir: Directionality, private _element: ElementRef,
-              private _renderer: Renderer2, private _ngZone: NgZone,
-              private _changeDetectorRef: ChangeDetectorRef) {
+              private _ngZone: NgZone, private _changeDetectorRef: ChangeDetectorRef) {
     // If a `Dir` directive exists up the tree, listen direction changes and update the left/right
     // properties to point to the proper start/end.
     if (_dir != null) {
@@ -493,7 +491,7 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
       // Set the transition class on the container so that the animations occur. This should not
       // be set initially because animations should only be triggered via a change in state.
       if (event.toState !== 'open-instant') {
-        this._renderer.addClass(this._element.nativeElement, 'mat-drawer-transition');
+        this._element.nativeElement.classList.add('mat-drawer-transition');
       }
 
       this._updateContentMargins();
@@ -537,9 +535,9 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
   /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */
   private _setContainerClass(isAdd: boolean): void {
     if (isAdd) {
-      this._renderer.addClass(this._element.nativeElement, 'mat-drawer-opened');
+      this._element.nativeElement.classList.add('mat-drawer-opened');
     } else {
-      this._renderer.removeClass(this._element.nativeElement, 'mat-drawer-opened');
+      this._element.nativeElement.classList.remove('mat-drawer-opened');
     }
   }
 

src/lib/slide-toggle/slide-toggle.ts

@@ -21,7 +21,6 @@ import {
   Input,
   OnDestroy,
   Output,
-  Renderer2,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -59,7 +58,7 @@ export class MatSlideToggleChange {
 // Boilerplate for applying mixins to MatSlideToggle.
 /** @docs-private */
 export class MatSlideToggleBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatSlideToggleMixinBase =
   mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent'));
@@ -140,20 +139,20 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   @ViewChild(MatRipple) _ripple: MatRipple;
 
   constructor(elementRef: ElementRef,
-              renderer: Renderer2,
               private _platform: Platform,
               private _focusMonitor: FocusMonitor,
               private _changeDetectorRef: ChangeDetectorRef,
               @Attribute('tabindex') tabIndex: string) {
-    super(renderer, elementRef);
 
+    super(elementRef);
     this.tabIndex = parseInt(tabIndex) || 0;
   }
 
   ngAfterContentInit() {
     this._slideRenderer = new SlideToggleRenderer(this._elementRef, this._platform);
 
-    this._focusMonitor.monitor(this._inputElement.nativeElement, false)
+    this._focusMonitor
+      .monitor(this._inputElement.nativeElement, false)
       .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
   }
 

src/lib/slider/slider.ts

@@ -32,7 +32,6 @@ import {
   OnInit,
   Optional,
   Output,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -86,7 +85,7 @@ export class MatSliderChange {
 // Boilerplate for applying mixins to MatSlider.
 /** @docs-private */
 export class MatSliderBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatSliderMixinBase =
   mixinTabIndex(mixinColor(mixinDisabled(MatSliderBase), 'accent'));
@@ -418,13 +417,12 @@ export class MatSlider extends _MatSliderMixinBase
     return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr';
   }
 
-  constructor(renderer: Renderer2,
-              elementRef: ElementRef,
+  constructor(elementRef: ElementRef,
               private _focusMonitor: FocusMonitor,
               private _changeDetectorRef: ChangeDetectorRef,
               @Optional() private _dir: Directionality,
               @Attribute('tabindex') tabIndex: string) {
-    super(renderer, elementRef);
+    super(elementRef);
 
     this.tabIndex = parseInt(tabIndex) || 0;
   }

src/lib/snack-bar/snack-bar-container.ts

@@ -13,7 +13,6 @@ import {
   ViewChild,
   NgZone,
   OnDestroy,
-  Renderer2,
   ElementRef,
   ChangeDetectionStrategy,
   ViewEncapsulation,
@@ -92,7 +91,6 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
 
   constructor(
     private _ngZone: NgZone,
-    private _renderer: Renderer2,
     private _elementRef: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef) {
     super();
@@ -104,24 +102,19 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
       throw Error('Attempting to attach snack bar content after content is already attached');
     }
 
+    const element: HTMLElement = this._elementRef.nativeElement;
+
     if (this.snackBarConfig.panelClass || this.snackBarConfig.extraClasses) {
-      const classes = [
-        ...this._getCssClasses(this.snackBarConfig.panelClass),
-        ...this._getCssClasses(this.snackBarConfig.extraClasses)
-      ];
-      // Not the most efficient way of adding classes, but the renderer doesn't allow us
-      // to pass in an array or a space-separated list.
-      for (let cssClass of classes) {
-        this._renderer.addClass(this._elementRef.nativeElement, cssClass);
-      }
+      element.classList.add(...this._getCssClasses(this.snackBarConfig.panelClass),
+                            ...this._getCssClasses(this.snackBarConfig.extraClasses));
     }
 
     if (this.snackBarConfig.horizontalPosition === 'center') {
-      this._renderer.addClass(this._elementRef.nativeElement, 'mat-snack-bar-center');
+      element.classList.add('mat-snack-bar-center');
     }
 
     if (this.snackBarConfig.verticalPosition === 'top') {
-      this._renderer.addClass(this._elementRef.nativeElement, 'mat-snack-bar-top');
+      element.classList.add('mat-snack-bar-top');
     }
 
     return this._portalOutlet.attachComponentPortal(portal);

src/lib/stepper/step-header.ts

@@ -77,10 +77,10 @@ export class MatStepHeader implements OnDestroy {
   private _optional: boolean;
 
   constructor(
-      public _intl: MatStepperIntl,
-      private _focusMonitor: FocusMonitor,
-      private _element: ElementRef,
-      changeDetectorRef: ChangeDetectorRef) {
+    public _intl: MatStepperIntl,
+    private _focusMonitor: FocusMonitor,
+    private _element: ElementRef,
+    changeDetectorRef: ChangeDetectorRef) {
     _focusMonitor.monitor(_element.nativeElement, true);
     this._intlSubscription = _intl.changes.subscribe(() => changeDetectorRef.markForCheck());
   }

src/lib/table/cell.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
+import {Directive, ElementRef, Input} from '@angular/core';
 import {
   CdkCell,
   CdkCellDef,
@@ -65,10 +65,9 @@ export class MatColumnDef extends _MatColumnDef {
 })
 export class MatHeaderCell extends _MatHeaderCell {
   constructor(columnDef: CdkColumnDef,
-              elementRef: ElementRef,
-              renderer: Renderer2) {
-    super(columnDef, elementRef, renderer);
-    renderer.addClass(elementRef.nativeElement, `mat-column-${columnDef.cssClassFriendlyName}`);
+              elementRef: ElementRef) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
   }
 }
 
@@ -82,9 +81,8 @@ export class MatHeaderCell extends _MatHeaderCell {
 })
 export class MatCell extends _MatCell {
   constructor(columnDef: CdkColumnDef,
-              elementRef: ElementRef,
-              renderer: Renderer2) {
-    super(columnDef, elementRef, renderer);
-    renderer.addClass(elementRef.nativeElement, `mat-column-${columnDef.cssClassFriendlyName}`);
+              elementRef: ElementRef) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
   }
 }

src/lib/tabs/ink-bar.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core';
+import {Directive, ElementRef, NgZone} from '@angular/core';
 
 
 /**
@@ -21,7 +21,6 @@ import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core';
 })
 export class MatInkBar {
   constructor(
-    private _renderer: Renderer2,
     private _elementRef: ElementRef,
     private _ngZone: NgZone) {}
 
@@ -44,12 +43,12 @@ export class MatInkBar {
 
   /** Shows the ink bar. */
   show(): void {
-    this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'visible');
+    this._elementRef.nativeElement.style.visibility = 'visible';
   }
 
   /** Hides the ink bar. */
   hide(): void {
-    this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
+    this._elementRef.nativeElement.style.visibility = 'hidden';
   }
 
   /**
@@ -57,10 +56,9 @@ export class MatInkBar {
    * @param element
    */
   private _setStyles(element: HTMLElement) {
-    const left = element ? (element.offsetLeft || 0) + 'px' : '0';
-    const width = element ? (element.offsetWidth || 0) + 'px' : '0';
+    const inkBar: HTMLElement = this._elementRef.nativeElement;
 
-    this._renderer.setStyle(this._elementRef.nativeElement, 'left', left);
-    this._renderer.setStyle(this._elementRef.nativeElement, 'width', width);
+    inkBar.style.left = element ? (element.offsetLeft || 0) + 'px' : '0';
+    inkBar.style.top = element ? (element.offsetWidth || 0) + 'px' : '0';
   }
 }

src/lib/tabs/tab-group.ts

@@ -19,7 +19,6 @@ import {
   OnDestroy,
   Output,
   QueryList,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -52,7 +51,7 @@ export type MatTabHeaderPosition = 'above' | 'below';
 // Boilerplate for applying mixins to MatTabGroup.
 /** @docs-private */
 export class MatTabGroupBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBase), 'primary');
 
@@ -122,12 +121,12 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
   @Input()
   get backgroundColor(): ThemePalette { return this._backgroundColor; }
   set backgroundColor(value: ThemePalette) {
-    let nativeElement = this._elementRef.nativeElement;
+    const nativeElement: HTMLElement = this._elementRef.nativeElement;
 
-    this._renderer.removeClass(nativeElement, `mat-background-${this.backgroundColor}`);
+    nativeElement.classList.remove(`mat-background-${this.backgroundColor}`);
 
     if (value) {
-      this._renderer.addClass(nativeElement, `mat-background-${value}`);
+      nativeElement.classList.add(`mat-background-${value}`);
     }
 
     this._backgroundColor = value;
@@ -152,10 +151,9 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
 
   private _groupId: number;
 
-  constructor(_renderer: Renderer2,
-              elementRef: ElementRef,
+  constructor(elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef) {
-    super(_renderer, elementRef);
+    super(elementRef);
     this._groupId = nextId++;
   }
 
@@ -265,21 +263,21 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
   _setTabBodyWrapperHeight(tabHeight: number): void {
     if (!this._dynamicHeight || !this._tabBodyWrapperHeight) { return; }
 
-    this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height',
-        this._tabBodyWrapperHeight + 'px');
+    const wrapper: HTMLElement = this._tabBodyWrapper.nativeElement;
+
+    wrapper.style.height = this._tabBodyWrapperHeight + 'px';
 
     // This conditional forces the browser to paint the height so that
     // the animation to the new height can have an origin.
     if (this._tabBodyWrapper.nativeElement.offsetHeight) {
-      this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height',
-          tabHeight + 'px');
+      wrapper.style.height = tabHeight + 'px';
     }
   }
 
   /** Removes the height of the tab body wrapper. */
   _removeTabBodyWrapperHeight(): void {
     this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight;
-    this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', '');
+    this._tabBodyWrapper.nativeElement.style.height = '';
   }
 
   /** Handle click events, setting new selected index if appropriate. */

src/lib/tabs/tab-header.ts

@@ -23,7 +23,6 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -134,7 +133,6 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
   @Output() indexFocused = new EventEmitter();
 
   constructor(private _elementRef: ElementRef,
-              private _renderer: Renderer2,
               private _changeDetectorRef: ChangeDetectorRef,
               private _viewportRuler: ViewportRuler,
               @Optional() private _dir: Directionality) {
@@ -305,8 +303,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
     const scrollDistance = this.scrollDistance;
     const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
 
-    this._renderer.setStyle(this._tabList.nativeElement, 'transform',
-        `translate3d(${translateX}px, 0, 0)`);
+    this._tabList.nativeElement.style.transform = `translate3d(${translateX}px, 0, 0)`;
   }
 
   /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -26,7 +26,6 @@ import {
   OnDestroy,
   Optional,
   QueryList,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -53,7 +52,7 @@ import {MatInkBar} from '../ink-bar';
 // Boilerplate for applying mixins to MatTabNav.
 /** @docs-private */
 export class MatTabNavBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatTabNavMixinBase = mixinDisableRipple(mixinColor(MatTabNavBase, 'primary'));
 
@@ -92,12 +91,12 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
   @Input()
   get backgroundColor(): ThemePalette { return this._backgroundColor; }
   set backgroundColor(value: ThemePalette) {
-    let nativeElement = this._elementRef.nativeElement;
+    const nativeElement: HTMLElement = this._elementRef.nativeElement;
 
-    this._renderer.removeClass(nativeElement, `mat-background-${this.backgroundColor}`);
+    nativeElement.classList.remove(`mat-background-${this.backgroundColor}`);
 
     if (value) {
-      this._renderer.addClass(nativeElement, `mat-background-${value}`);
+      nativeElement.classList.add(`mat-background-${value}`);
     }
 
     this._backgroundColor = value;
@@ -112,13 +111,12 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
   }
   private _disableRipple: boolean = false;
 
-  constructor(renderer: Renderer2,
-              elementRef: ElementRef,
+  constructor(elementRef: ElementRef,
               @Optional() private _dir: Directionality,
               private _ngZone: NgZone,
               private _changeDetectorRef: ChangeDetectorRef,
               private _viewportRuler: ViewportRuler) {
-    super(renderer, elementRef);
+    super(elementRef);
   }
 
   /** Notifies the component that the active link has been changed. */

src/lib/toolbar/toolbar.ts

@@ -15,7 +15,6 @@ import {
   ElementRef,
   isDevMode,
   QueryList,
-  Renderer2,
   ViewEncapsulation
 } from '@angular/core';
 import {CanColor, mixinColor} from '@angular/material/core';
@@ -24,7 +23,7 @@ import {Platform} from '@angular/cdk/platform';
 // Boilerplate for applying mixins to MatToolbar.
 /** @docs-private */
 export class MatToolbarBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+  constructor(public _elementRef: ElementRef) {}
 }
 export const _MatToolbarMixinBase = mixinColor(MatToolbarBase);
 
@@ -56,8 +55,8 @@ export class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterV
   /** Reference to all toolbar row elements that have been projected. */
   @ContentChildren(MatToolbarRow) _toolbarRows: QueryList<MatToolbarRow>;
 
-  constructor(renderer: Renderer2, elementRef: ElementRef, private _platform: Platform) {
-    super(renderer, elementRef);
+  constructor(elementRef: ElementRef, private _platform: Platform) {
+    super(elementRef);
   }
 
   ngAfterViewInit() {

src/lib/tooltip/tooltip.ts

@@ -39,7 +39,6 @@ import {
   NgZone,
   OnDestroy,
   Optional,
-  Renderer2,
   ViewContainerRef,
   ViewEncapsulation,
 } from '@angular/core';
@@ -163,11 +162,9 @@ export class MatTooltip implements OnDestroy {
     }
   }
 
-  private _enterListener: Function;
-  private _leaveListener: Function;
+  private _manualListeners = new Map<string, Function>();
 
   constructor(
-    renderer: Renderer2,
     private _overlay: Overlay,
     private _elementRef: ElementRef,
     private _scrollDispatcher: ScrollDispatcher,
@@ -182,10 +179,11 @@ export class MatTooltip implements OnDestroy {
     // The mouse events shouldn't be bound on iOS devices, because
     // they can prevent the first tap from firing its click event.
     if (!_platform.IOS) {
-      this._enterListener =
-        renderer.listen(_elementRef.nativeElement, 'mouseenter', () => this.show());
-      this._leaveListener =
-        renderer.listen(_elementRef.nativeElement, 'mouseleave', () => this.hide());
+      this._manualListeners.set('mouseenter', () => this.show());
+      this._manualListeners.set('mouseleave', () => this.hide());
+
+      this._manualListeners
+        .forEach((listener, event) => _elementRef.nativeElement.addEventListener(event, listener));
     }
 
     _focusMonitor.monitor(_elementRef.nativeElement, false).subscribe(origin => {
@@ -208,8 +206,11 @@ export class MatTooltip implements OnDestroy {
 
     // Clean up the event listeners set in the constructor
     if (!this._platform.IOS) {
-      this._enterListener();
-      this._leaveListener();
+      this._manualListeners.forEach((listener, event) => {
+        this._elementRef.nativeElement.removeEventListener(event, listener);
+      });
+
+      this._manualListeners.clear();
     }
 
     this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message);