refactor: move away from deprecated apis (#3836)

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/demo-app/style/style-demo.ts

@@ -1,4 +1,4 @@
-import {Component, Renderer} from '@angular/core';
+import {Component, Renderer2} from '@angular/core';
 import {FocusOriginMonitor} from '@angular/material';
 
 
@@ -9,5 +9,5 @@ import {FocusOriginMonitor} from '@angular/material';
   styleUrls: ['style-demo.css'],
 })
 export class StyleDemo {
-  constructor(public renderer: Renderer, public fom: FocusOriginMonitor) {}
+  constructor(public renderer: Renderer2, public fom: FocusOriginMonitor) {}
 }

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,28 +259,29 @@ 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();
+        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();
+        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(() => {
       buttonToggleInstances[1].checked = true;
@@ -301,7 +302,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 +311,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 +342,8 @@ 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 +378,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 +482,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,
@@ -374,7 +374,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;
@@ -412,7 +412,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';
@@ -120,7 +120,7 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
   get disableRipple() { return this._disableRipple; }
   set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
 
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer,
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer2,
               private _focusOriginMonitor: FocusOriginMonitor) {
     super();
     this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
@@ -143,13 +143,17 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
 
   _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() {
@@ -191,7 +195,7 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
   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';
@@ -692,11 +692,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

@@ -9,7 +9,7 @@ import {
   Input,
   OnDestroy,
   Output,
-  Renderer,
+  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -190,7 +190,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase
   /** Reference to the focused state ripple. */
   private _focusRipple: RippleRef;
 
-  constructor(private _renderer: Renderer,
+  constructor(private _renderer: Renderer2,
               private _elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
               private _focusOriginMonitor: FocusOriginMonitor) {
@@ -260,7 +260,11 @@ export class MdCheckbox extends _MdCheckboxMixinBase
 
   _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}`);
+      }
     }
   }
 
@@ -312,15 +316,15 @@ export class MdCheckbox extends _MdCheckboxMixinBase
       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,6 @@ import {
   NgModule,
   ModuleWithProviders,
   Directive,
-  OpaqueToken,
   Inject,
   Optional,
   isDevMode,
@@ -12,7 +11,7 @@ import {
 import {DOCUMENT} from '@angular/platform-browser';
 import {MdError} from '../errors/error';
 
-export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode');
+export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');
 
 /** Injection token that configures whether the Material sanity checks are enabled. */
 export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('md-sanity-checks');