refactor: move away from deprecated apis

Moves away from the APIs that were deprecated in Angular 4. They include:
* Switching from using `OpaqueToken` to `InjectionToken`.
* Moving from `Renderer` to `Renderer2`.
* Changing the `Injector.get(thing: any)` usages to use the new signature `Injector.get<T>(thing: T)`.

Author: crisbeto

src/lib/button-toggle/button-toggle.spec.ts

@@ -5,7 +5,7 @@ import {
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
-import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
+import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {
@@ -56,7 +56,7 @@ describe('MdButtonToggle', () => {
 
       groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
       groupNativeElement = groupDebugElement.nativeElement;
-      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
+      groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
 
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
 
@@ -215,7 +215,7 @@ describe('MdButtonToggle', () => {
     let groupInstance: MdButtonToggleGroup;
     let buttonToggleInstances: MdButtonToggle[];
     let testComponent: ButtonToggleGroupWithNgModel;
-    let groupNgControl: NgControl;
+    let groupNgModel: NgModel;
 
     beforeEach(async(() => {
       fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
@@ -225,8 +225,8 @@ describe('MdButtonToggle', () => {
 
       groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
       groupNativeElement = groupDebugElement.nativeElement;
-      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
-      groupNgControl = groupDebugElement.injector.get(NgControl);
+      groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
+      groupNgModel = groupDebugElement.injector.get<NgModel>(NgModel);
 
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
       buttonToggleNativeElements =
@@ -259,27 +259,27 @@ describe('MdButtonToggle', () => {
       expect(groupInstance.selected.value).toBe(groupInstance.value);
     });
 
-    it('should have the correct ngControl state initially and after interaction', fakeAsync(() => {
-      expect(groupNgControl.valid).toBe(true);
-      expect(groupNgControl.pristine).toBe(true);
-      expect(groupNgControl.touched).toBe(false);
+    it('should have the correct FormControl state initially and after interaction', fakeAsync(() => {
+      expect(groupNgModel.valid).toBe(true);
+      expect(groupNgModel.pristine).toBe(true);
+      expect(groupNgModel.touched).toBe(false);
 
       buttonToggleInstances[1].checked = true;
       fixture.detectChanges();
       tick();
 
-      expect(groupNgControl.valid).toBe(true);
-      expect(groupNgControl.pristine).toBe(false);
-      expect(groupNgControl.touched).toBe(false);
+      expect(groupNgModel.valid).toBe(true);
+      expect(groupNgModel.pristine).toBe(false);
+      expect(groupNgModel.touched).toBe(false);
 
       let nativeRadioLabel = buttonToggleDebugElements[2].query(By.css('label')).nativeElement;
       nativeRadioLabel.click();
       fixture.detectChanges();
       tick();
 
-      expect(groupNgControl.valid).toBe(true);
-      expect(groupNgControl.pristine).toBe(false);
-      expect(groupNgControl.touched).toBe(true);
+      expect(groupNgModel.valid).toBe(true);
+      expect(groupNgModel.pristine).toBe(false);
+      expect(groupNgModel.touched).toBe(true);
     }));
 
     it('should update the ngModel value when selecting a button toggle', fakeAsync(() => {
@@ -301,7 +301,7 @@ describe('MdButtonToggle', () => {
     let groupInstance: MdButtonToggleGroup;
     let buttonToggleInstances: MdButtonToggle[];
     let testComponent: ButtonToggleGroupWithNgModel;
-    let groupNgControl: NgControl;
+    let groupNgModel: NgModel;
 
     beforeEach(async(() => {
       fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
@@ -310,8 +310,8 @@ describe('MdButtonToggle', () => {
 
       groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
       groupNativeElement = groupDebugElement.nativeElement;
-      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
-      groupNgControl = groupDebugElement.injector.get(NgControl);
+      groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
+      groupNgModel = groupDebugElement.injector.get<NgModel>(NgModel);
 
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
       buttonToggleNativeElements =
@@ -341,7 +341,7 @@ describe('MdButtonToggle', () => {
       let fixture = TestBed.createComponent(ButtonToggleGroupWithInitialValue);
       let testComponent = fixture.debugElement.componentInstance;
       let groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
-      let groupInstance: MdButtonToggleGroup = groupDebugElement.injector.get(MdButtonToggleGroup);
+      let groupInstance: MdButtonToggleGroup = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
 
       fixture.detectChanges();
 
@@ -376,7 +376,8 @@ describe('MdButtonToggle', () => {
 
       groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple));
       groupNativeElement = groupDebugElement.nativeElement;
-      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroupMultiple);
+      groupInstance = groupDebugElement.injector.get<MdButtonToggleGroupMultiple>(
+          MdButtonToggleGroupMultiple);
 
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
       buttonToggleNativeElements = buttonToggleDebugElements
@@ -479,7 +480,7 @@ describe('MdButtonToggle', () => {
       testComponent = fixture.debugElement.componentInstance;
 
       groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
-      groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
+      groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
     }));
 
     it('should toggle the disabled state', () => {

src/lib/button-toggle/button-toggle.ts

@@ -3,7 +3,7 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
-  Renderer,
+  Renderer2,
   EventEmitter,
   HostBinding,
   Input,
@@ -380,7 +380,7 @@ export class MdButtonToggle implements OnInit {
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
               private _buttonToggleDispatcher: UniqueSelectionDispatcher,
-              private _renderer: Renderer,
+              private _renderer: Renderer2,
               private _elementRef: ElementRef,
               private _focusOriginMonitor: FocusOriginMonitor) {
     this.buttonToggleGroup = toggleGroup;
@@ -418,7 +418,7 @@ export class MdButtonToggle implements OnInit {
 
   /** Focuses the button. */
   focus() {
-    this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
+    this._inputElement.nativeElement.focus();
   }
 
   /** Toggle the state of the current button toggle. */

src/lib/button/button.ts

@@ -6,7 +6,7 @@ import {
   HostBinding,
   Input,
   OnDestroy,
-  Renderer,
+  Renderer2,
   ViewEncapsulation
 } from '@angular/core';
 import {coerceBooleanProperty, FocusOriginMonitor} from '../core';
@@ -119,7 +119,7 @@ export class MdButton implements OnDestroy {
   get disabled() { return this._disabled; }
   set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value) ? true : null; }
 
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer,
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer2,
               private _focusOriginMonitor: FocusOriginMonitor) {
     this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
@@ -141,13 +141,17 @@ export class MdButton implements OnDestroy {
 
   _setElementColor(color: string, isAdd: boolean) {
     if (color != null && color != '') {
-      this._renderer.setElementClass(this._getHostElement(), `mat-${color}`, isAdd);
+      if (isAdd) {
+        this._renderer.addClass(this._getHostElement(), `mat-${color}`);
+      } else {
+        this._renderer.removeClass(this._getHostElement(), `mat-${color}`);
+      }
     }
   }
 
   /** Focuses the button. */
   focus(): void {
-    this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
+    this._getHostElement().focus();
   }
 
   _getHostElement() {
@@ -188,7 +192,7 @@ export class MdButton implements OnDestroy {
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton {
-  constructor(elementRef: ElementRef, renderer: Renderer, focusOriginMonitor: FocusOriginMonitor) {
+  constructor(elementRef: ElementRef, renderer: Renderer2, focusOriginMonitor: FocusOriginMonitor) {
     super(elementRef, renderer, focusOriginMonitor);
   }
 

src/lib/checkbox/checkbox.spec.ts

@@ -6,7 +6,7 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
-import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
+import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './index';
@@ -682,11 +682,11 @@ describe('MdCheckbox', () => {
       flushMicrotasks();
 
       let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox));
-      let ngControl = <NgControl> checkboxElement.injector.get(NgControl);
+      let ngModel = checkboxElement.injector.get<NgModel>(NgModel);
 
-      expect(ngControl.valid).toBe(true);
-      expect(ngControl.pristine).toBe(true);
-      expect(ngControl.touched).toBe(false);
+      expect(ngModel.valid).toBe(true);
+      expect(ngModel.pristine).toBe(true);
+      expect(ngModel.touched).toBe(false);
 
       // TODO(jelbourn): test that `touched` and `pristine` state are modified appropriately.
       // This is currently blocked on issues with async() and fakeAsync().

src/lib/checkbox/checkbox.ts

@@ -6,7 +6,7 @@ import {
   EventEmitter,
   Input,
   Output,
-  Renderer,
+  Renderer2,
   ViewEncapsulation,
   forwardRef,
   ViewChild,
@@ -188,7 +188,7 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
   /** Reference to the focus origin monitor subscription. */
   private _focusedSubscription: Subscription;
 
-  constructor(private _renderer: Renderer,
+  constructor(private _renderer: Renderer2,
               private _elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
               private _focusOriginMonitor: FocusOriginMonitor) {
@@ -276,7 +276,11 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
 
   _setElementColor(color: string, isAdd: boolean) {
     if (color != null && color != '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
+      if (isAdd) {
+        this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
+      } else {
+        this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
+      }
     }
   }
 
@@ -327,15 +331,15 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
       return;
     }
     if (this._currentAnimationClass.length > 0) {
-      renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, false);
+      renderer.removeClass(elementRef.nativeElement, this._currentAnimationClass);
     }
 
     this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(
         oldState, newState);
     this._currentCheckState = newState;
 
     if (this._currentAnimationClass.length > 0) {
-      renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, true);
+      renderer.addClass(elementRef.nativeElement, this._currentAnimationClass);
     }
   }
 

src/lib/chips/chip.ts

@@ -6,7 +6,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  Renderer
+  Renderer2,
 } from '@angular/core';
 
 import {Focusable} from '../core/a11y/focus-key-manager';
@@ -58,7 +58,7 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
   /** Emitted when the chip is destroyed. */
   @Output() destroy = new EventEmitter<MdChipEvent>();
 
-  constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) { }
+  constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef) { }
 
   ngOnInit(): void {
     this._addDefaultCSSClass();
@@ -119,7 +119,7 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
 
   /** Allows for programmatic focusing of the chip. */
   focus(): void {
-    this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus');
+    this._elementRef.nativeElement.focus();
     this.onFocus.emit({chip: this});
   }
 
@@ -139,12 +139,12 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
     let el: HTMLElement = this._elementRef.nativeElement;
 
     // Always add the `mat-chip` class
-    el.classList.add('mat-chip');
+    this._renderer.addClass(el, 'mat-chip');
 
     // If we are a basic chip, also add the `mat-basic-chip` class for :not() targeting
     if (el.nodeName.toLowerCase() == 'mat-basic-chip' || el.hasAttribute('mat-basic-chip') ||
         el.nodeName.toLowerCase() == 'md-basic-chip' || el.hasAttribute('md-basic-chip')) {
-      el.classList.add('mat-basic-chip');
+      this._renderer.addClass(el, 'mat-basic-chip');
     }
   }
 
@@ -158,7 +158,11 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
   /** Sets the mat-color on the native element. */
   private _setElementColor(color: string, isAdd: boolean) {
     if (color != null && color != '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
+      if (isAdd) {
+        this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
+      } else {
+        this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
+      }
     }
   }
 }

src/lib/core/a11y/live-announcer.ts

@@ -1,12 +1,12 @@
 import {
   Injectable,
-  OpaqueToken,
+  InjectionToken,
   Optional,
   Inject,
   SkipSelf,
 } from '@angular/core';
 
-export const LIVE_ANNOUNCER_ELEMENT_TOKEN  = new OpaqueToken('liveAnnouncerElement');
+export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken<HTMLElement>('liveAnnouncerElement');
 
 /** Possible politeness levels. */
 export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';

src/lib/core/compatibility/compatibility.ts

@@ -2,7 +2,7 @@ import {
   NgModule,
   ModuleWithProviders,
   Directive,
-  OpaqueToken,
+  InjectionToken,
   Inject,
   Optional,
   isDevMode,
@@ -12,7 +12,7 @@ import {DOCUMENT} from '@angular/platform-browser';
 /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
 let hasDoneGlobalChecks = false;
 
-export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode');
+export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');
 
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MAT_ELEMENTS_SELECTOR = `

src/lib/core/line/line.ts

@@ -1,9 +1,9 @@
 import {
-    NgModule,
-    Directive,
-    Renderer,
-    ElementRef,
-    QueryList
+  NgModule,
+  Directive,
+  Renderer2,
+  ElementRef,
+  QueryList,
 } from '@angular/core';
 import {CompatibilityModule} from '../compatibility/compatibility';
 
@@ -26,7 +26,7 @@ export class MdLine {}
  * @docs-private
  */
 export class MdLineSetter {
-  constructor(private _lines: QueryList<MdLine>, private _renderer: Renderer,
+  constructor(private _lines: QueryList<MdLine>, private _renderer: Renderer2,
               private _element: ElementRef) {
     this._setLineClass(this._lines.length);
 
@@ -50,8 +50,12 @@ export class MdLineSetter {
     this._setClass('mat-multi-line', false);
   }
 
-  private _setClass(className: string, bool: boolean): void {
-    this._renderer.setElementClass(this._element.nativeElement, className, bool);
+  private _setClass(className: string, isAdd: boolean): void {
+    if (isAdd) {
+      this._renderer.addClass(this._element.nativeElement, className);
+    } else {
+      this._renderer.removeClass(this._element.nativeElement, className);
+    }
   }
 
 }