From 1c03ac67276e9c5718b04683de1a8af402f7086d Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 29 Mar 2017 19:39:19 +0200 Subject: [PATCH] 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(thing: T)`. --- src/demo-app/style/style-demo.ts | 4 +- src/lib/button-toggle/button-toggle.spec.ts | 61 ++++++++++--------- src/lib/button-toggle/button-toggle.ts | 6 +- src/lib/button/button.ts | 14 +++-- src/lib/checkbox/checkbox.spec.ts | 10 +-- src/lib/checkbox/checkbox.ts | 14 +++-- src/lib/chips/chip.ts | 16 +++-- src/lib/core/a11y/live-announcer.ts | 4 +- src/lib/core/compatibility/compatibility.ts | 3 +- src/lib/core/line/line.ts | 20 +++--- src/lib/core/overlay/scroll/scrollable.ts | 4 +- src/lib/core/portal/portal.spec.ts | 2 +- src/lib/core/ripple/ripple.ts | 9 +-- .../pseudo-checkbox/pseudo-checkbox.ts | 8 +-- .../core/style/focus-origin-monitor.spec.ts | 6 +- src/lib/core/style/focus-origin-monitor.ts | 38 +++++++----- src/lib/dialog/dialog-container.ts | 5 +- src/lib/dialog/dialog-injector.ts | 6 +- src/lib/dialog/dialog.spec.ts | 2 +- src/lib/grid-list/grid-list.ts | 6 +- src/lib/grid-list/grid-tile.ts | 8 +-- src/lib/icon/icon.ts | 22 ++++--- src/lib/input/autosize.spec.ts | 2 +- src/lib/input/input-container.spec.ts | 2 +- src/lib/input/input-container.ts | 8 +-- src/lib/list/list.ts | 11 ++-- src/lib/menu/menu-item.ts | 6 +- src/lib/menu/menu-trigger.ts | 6 +- src/lib/radio/radio.spec.ts | 30 ++++----- src/lib/radio/radio.ts | 4 +- src/lib/sidenav/sidenav.ts | 22 +++---- src/lib/slide-toggle/slide-toggle.spec.ts | 38 ++++++------ src/lib/slide-toggle/slide-toggle.ts | 10 ++- src/lib/slider/slider.spec.ts | 18 +++--- src/lib/slider/slider.ts | 4 +- src/lib/snack-bar/snack-bar-container.ts | 6 +- src/lib/tabs/ink-bar.ts | 12 ++-- src/lib/tabs/tab-group.ts | 10 +-- src/lib/tabs/tab-label-wrapper.ts | 6 +- src/lib/toolbar/toolbar.ts | 12 +++- src/lib/tooltip/tooltip.spec.ts | 6 +- src/lib/tooltip/tooltip.ts | 4 +- 42 files changed, 263 insertions(+), 222 deletions(-) diff --git a/src/demo-app/style/style-demo.ts b/src/demo-app/style/style-demo.ts index e1151da131f8..6d4db2808233 100644 --- a/src/demo-app/style/style-demo.ts +++ b/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) {} } diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts index 6050dd4449a9..c4d276ef768b 100644 --- a/src/lib/button-toggle/button-toggle.spec.ts +++ b/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); 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); + groupNgModel = groupDebugElement.injector.get(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); + groupNgModel = groupDebugElement.injector.get(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); 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); 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); })); it('should toggle the disabled state', () => { diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 8cacf286b24a..d704dec3c9e6 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/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. */ diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index dd7ae4f8df39..ab29c24704dd 100644 --- a/src/lib/button/button.ts +++ b/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); } diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 0224157dbda5..f4cd8bbc753f 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/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'; @@ -691,11 +691,11 @@ describe('MdCheckbox', () => { flushMicrotasks(); let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox)); - let ngControl = checkboxElement.injector.get(NgControl); + let ngModel = checkboxElement.injector.get(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(). diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 995cc57325a5..bdaf20bb2c0d 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -9,7 +9,7 @@ import { Input, OnDestroy, Output, - Renderer, + Renderer2, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -181,7 +181,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) { @@ -251,7 +251,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}`); + } } } @@ -303,7 +307,7 @@ 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( @@ -311,7 +315,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase this._currentCheckState = newState; if (this._currentAnimationClass.length > 0) { - renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, true); + renderer.addClass(elementRef.nativeElement, this._currentAnimationClass); } } diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 73656bdfefdf..5e06c3839994 100644 --- a/src/lib/chips/chip.ts +++ b/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(); - 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}`); + } } } } diff --git a/src/lib/core/a11y/live-announcer.ts b/src/lib/core/a11y/live-announcer.ts index 8348f7e6df6c..4186b362ece9 100644 --- a/src/lib/core/a11y/live-announcer.ts +++ b/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('liveAnnouncerElement'); /** Possible politeness levels. */ export type AriaLivePoliteness = 'off' | 'polite' | 'assertive'; diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts index eaf79593a898..84c8c836c234 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/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('md-compatibility-mode'); /** Injection token that configures whether the Material sanity checks are enabled. */ export const MATERIAL_SANITY_CHECKS = new InjectionToken('md-sanity-checks'); diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts index 66344688b26c..5527882af6e8 100644 --- a/src/lib/core/line/line.ts +++ b/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 {MdCommonModule} from '../common-behaviors/common-module'; @@ -26,7 +26,7 @@ export class MdLine {} * @docs-private */ export class MdLineSetter { - constructor(private _lines: QueryList, private _renderer: Renderer, + constructor(private _lines: QueryList, 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); + } } } diff --git a/src/lib/core/overlay/scroll/scrollable.ts b/src/lib/core/overlay/scroll/scrollable.ts index 18a4be6f186f..963235cadc58 100644 --- a/src/lib/core/overlay/scroll/scrollable.ts +++ b/src/lib/core/overlay/scroll/scrollable.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, OnInit, OnDestroy, NgZone, Renderer} from '@angular/core'; +import {Directive, ElementRef, OnInit, OnDestroy, NgZone, Renderer2} from '@angular/core'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; import {ScrollDispatcher} from './scroll-dispatcher'; @@ -20,7 +20,7 @@ export class Scrollable implements OnInit, OnDestroy { constructor(private _elementRef: ElementRef, private _scroll: ScrollDispatcher, private _ngZone: NgZone, - private _renderer: Renderer) {} + private _renderer: Renderer2) {} ngOnInit() { this._scrollListener = this._ngZone.runOutsideAngular(() => { diff --git a/src/lib/core/portal/portal.spec.ts b/src/lib/core/portal/portal.spec.ts index 8fc3c5743e19..caf9f09f068c 100644 --- a/src/lib/core/portal/portal.spec.ts +++ b/src/lib/core/portal/portal.spec.ts @@ -382,7 +382,7 @@ class ChocolateInjector { constructor(public parentInjector: Injector) { } get(token: any) { - return token === Chocolate ? new Chocolate() : this.parentInjector.get(token); + return token === Chocolate ? new Chocolate() : this.parentInjector.get(token); } } diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index 04736035db74..73e2835c8925 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -7,21 +7,22 @@ import { OnChanges, SimpleChanges, OnDestroy, - OpaqueToken, + InjectionToken, Optional, } from '@angular/core'; import {RippleConfig, RippleRenderer} from './ripple-renderer'; import {ViewportRuler} from '../overlay/position/viewport-ruler'; import {RippleRef} from './ripple-ref'; -/** OpaqueToken that can be used to specify the global ripple options. */ -export const MD_RIPPLE_GLOBAL_OPTIONS = new OpaqueToken('md-ripple-global-options'); - export interface RippleGlobalOptions { disabled?: boolean; baseSpeedFactor?: number; } +/** Injection token that can be used to specify the global ripple options. */ +export const MD_RIPPLE_GLOBAL_OPTIONS = + new InjectionToken('md-ripple-global-options'); + @Directive({ selector: '[md-ripple], [mat-ripple], [mdRipple], [matRipple]', exportAs: 'mdRipple', diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts index 746f1a672651..8b17c2e3fd48 100644 --- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts +++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts @@ -3,7 +3,7 @@ import { ViewEncapsulation, Input, ElementRef, - Renderer, + Renderer2, } from '@angular/core'; export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; @@ -46,15 +46,15 @@ export class MdPseudoCheckbox { if (value) { let nativeElement = this._elementRef.nativeElement; - this._renderer.setElementClass(nativeElement, `mat-${this.color}`, false); - this._renderer.setElementClass(nativeElement, `mat-${value}`, true); + this._renderer.removeClass(nativeElement, `mat-${this.color}`); + this._renderer.addClass(nativeElement, `mat-${value}`); this._color = value; } } private _color: string; - constructor(private _elementRef: ElementRef, private _renderer: Renderer) { + constructor(private _elementRef: ElementRef, private _renderer: Renderer2) { this.color = 'accent'; } } diff --git a/src/lib/core/style/focus-origin-monitor.spec.ts b/src/lib/core/style/focus-origin-monitor.spec.ts index f3b2577ac6a1..a6c3893186e8 100644 --- a/src/lib/core/style/focus-origin-monitor.spec.ts +++ b/src/lib/core/style/focus-origin-monitor.spec.ts @@ -1,5 +1,5 @@ import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing'; -import {Component, Renderer} from '@angular/core'; +import {Component, Renderer2} from '@angular/core'; import {StyleModule} from './index'; import {By} from '@angular/platform-browser'; import {TAB} from '../keyboard/keycodes'; @@ -12,7 +12,7 @@ import { describe('FocusOriginMonitor', () => { let fixture: ComponentFixture; let buttonElement: HTMLElement; - let buttonRenderer: Renderer; + let buttonRenderer: Renderer2; let focusOriginMonitor: FocusOriginMonitor; let changeHandler: (origin: FocusOrigin) => void; @@ -456,7 +456,7 @@ describe('cdkMonitorFocus', () => { template: `` }) class PlainButton { - constructor(public renderer: Renderer) {} + constructor(public renderer: Renderer2) {} } diff --git a/src/lib/core/style/focus-origin-monitor.ts b/src/lib/core/style/focus-origin-monitor.ts index d7cca8b61355..151f05da20ca 100644 --- a/src/lib/core/style/focus-origin-monitor.ts +++ b/src/lib/core/style/focus-origin-monitor.ts @@ -7,8 +7,8 @@ import { OnDestroy, Optional, Output, - Renderer, - SkipSelf + Renderer2, + SkipSelf, } from '@angular/core'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; @@ -25,7 +25,7 @@ export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program'; type MonitoredElementInfo = { unlisten: Function, checkChildren: boolean, - renderer: Renderer, + renderer: Renderer2, subject: Subject }; @@ -63,7 +63,9 @@ export class FocusOriginMonitor { * @returns An observable that emits when the focus state of the element changes. * When the element is blurred, null will be emitted. */ - monitor(element: Element, renderer: Renderer, checkChildren: boolean): Observable { + monitor(element: HTMLElement, renderer: Renderer2, checkChildren: boolean): + Observable { + // Check if we're already monitoring this element. if (this._elementInfo.has(element)) { let info = this._elementInfo.get(element); @@ -101,7 +103,7 @@ export class FocusOriginMonitor { * Stops monitoring an element and removes all focus classes. * @param element The element to stop monitoring. */ - stopMonitoring(element: Element): void { + stopMonitoring(element: HTMLElement): void { let elementInfo = this._elementInfo.get(element); if (elementInfo) { @@ -119,9 +121,9 @@ export class FocusOriginMonitor { * @param renderer The renderer to use to invoke the focus method on the element. * @param origin The focus origin. */ - focusVia(element: Node, renderer: Renderer, origin: FocusOrigin): void { + focusVia(element: HTMLElement, renderer: Renderer2, origin: FocusOrigin): void { this._setOriginForCurrentEventQueue(origin); - renderer.invokeElementMethod(element, 'focus'); + element.focus(); } /** Register necessary event listeners on the document and window. */ @@ -167,13 +169,17 @@ export class FocusOriginMonitor { * @param element The element to update the classes on. * @param origin The focus origin. */ - private _setClasses(element: Element, origin: FocusOrigin): void { + private _setClasses(element: HTMLElement, origin: FocusOrigin): void { let renderer = this._elementInfo.get(element).renderer; - renderer.setElementClass(element, 'cdk-focused', !!origin); - renderer.setElementClass(element, 'cdk-touch-focused', origin === 'touch'); - renderer.setElementClass(element, 'cdk-keyboard-focused', origin === 'keyboard'); - renderer.setElementClass(element, 'cdk-mouse-focused', origin === 'mouse'); - renderer.setElementClass(element, 'cdk-program-focused', origin === 'program'); + let toggleClass = (className: string, shouldSet: boolean) => { + shouldSet ? renderer.addClass(element, className) : renderer.removeClass(element, className); + }; + + toggleClass('cdk-focused', !!origin); + toggleClass('cdk-touch-focused', origin === 'touch'); + toggleClass('cdk-keyboard-focused', origin === 'keyboard'); + toggleClass('cdk-mouse-focused', origin === 'mouse'); + toggleClass('cdk-program-focused', origin === 'program'); } /** @@ -218,7 +224,7 @@ export class FocusOriginMonitor { * @param event The focus event. * @param element The monitored element. */ - private _onFocus(event: FocusEvent, element: Element) { + private _onFocus(event: FocusEvent, element: HTMLElement) { // NOTE(mmalerba): We currently set the classes based on the focus origin of the most recent // focus event affecting the monitored element. If we want to use the origin of the first event // instead we should check for the cdk-focused class here and return if the element already has @@ -257,7 +263,7 @@ export class FocusOriginMonitor { * @param event The blur event. * @param element The monitored element. */ - private _onBlur(event: FocusEvent, element: Element) { + private _onBlur(event: FocusEvent, element: HTMLElement) { // If we are counting child-element-focus as focused, make sure that we aren't just blurring in // order to focus another child of the monitored element. if (this._elementInfo.get(element).checkChildren && event.relatedTarget instanceof Node && @@ -287,7 +293,7 @@ export class CdkMonitorFocus implements OnDestroy { @Output() cdkFocusChange = new EventEmitter(); constructor(private _elementRef: ElementRef, private _focusOriginMonitor: FocusOriginMonitor, - renderer: Renderer) { + renderer: Renderer2) { this._focusOriginMonitor.monitor( this._elementRef.nativeElement, renderer, this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus')) diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts index 7cbce388dfd3..2d5f984229b2 100644 --- a/src/lib/dialog/dialog-container.ts +++ b/src/lib/dialog/dialog-container.ts @@ -3,7 +3,8 @@ import { ComponentRef, ViewChild, ViewEncapsulation, - Renderer, + NgZone, + OnDestroy, ElementRef, EventEmitter, Inject, @@ -73,7 +74,7 @@ export class MdDialogContainer extends BasePortalHost { _onAnimationStateChange = new EventEmitter(); constructor( - private _renderer: Renderer, + private _ngZone: NgZone, private _elementRef: ElementRef, private _focusTrapFactory: FocusTrapFactory, @Optional() @Inject(DOCUMENT) _document: any) { diff --git a/src/lib/dialog/dialog-injector.ts b/src/lib/dialog/dialog-injector.ts index c6edc4e1b471..8da3c9412946 100644 --- a/src/lib/dialog/dialog-injector.ts +++ b/src/lib/dialog/dialog-injector.ts @@ -1,7 +1,7 @@ -import {Injector, OpaqueToken} from '@angular/core'; +import {Injector, InjectionToken} from '@angular/core'; import {MdDialogRef} from './dialog-ref'; -export const MD_DIALOG_DATA = new OpaqueToken('MdDialogData'); +export const MD_DIALOG_DATA = new InjectionToken('MdDialogData'); /** Custom injector type specifically for instantiating components with a dialog. */ export class DialogInjector implements Injector { @@ -19,6 +19,6 @@ export class DialogInjector implements Injector { return this._data; } - return this._parentInjector.get(token, notFoundValue); + return this._parentInjector.get(token, notFoundValue); } } diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index d90541bf0a04..ed2a0e3fa1c3 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -90,7 +90,7 @@ describe('MdDialog', () => { let dialogInjector = dialogRef.componentInstance.dialogInjector; expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef); - expect(dialogInjector.get(DirectiveWithViewContainer)).toBeTruthy( + expect(dialogInjector.get(DirectiveWithViewContainer)).toBeTruthy( 'Expected the dialog component to be created with the injector from the viewContainerRef.' ); }); diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index 8da4a76bceae..458974280888 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -6,7 +6,7 @@ import { Input, ContentChildren, QueryList, - Renderer, + Renderer2, ElementRef, Optional, } from '@angular/core'; @@ -60,7 +60,7 @@ export class MdGridList implements OnInit, AfterContentChecked { @ContentChildren(MdGridTile) _tiles: QueryList; constructor( - private _renderer: Renderer, + private _renderer: Renderer2, private _element: ElementRef, @Optional() private _dir: Dir) {} @@ -136,7 +136,7 @@ export class MdGridList implements OnInit, AfterContentChecked { /** Sets style on the main grid-list element, given the style name and value. */ _setListStyle(style: [string, string]): void { if (style) { - this._renderer.setElementStyle(this._element.nativeElement, style[0], style[1]); + this._renderer.setStyle(this._element.nativeElement, style[0], style[1]); } } } diff --git a/src/lib/grid-list/grid-tile.ts b/src/lib/grid-list/grid-tile.ts index fb70d7c3cbdb..b40b8f14bb3e 100644 --- a/src/lib/grid-list/grid-tile.ts +++ b/src/lib/grid-list/grid-tile.ts @@ -1,7 +1,7 @@ import { Component, ViewEncapsulation, - Renderer, + Renderer2, ElementRef, Input, ContentChildren, @@ -26,7 +26,7 @@ export class MdGridTile { _rowspan: number = 1; _colspan: number = 1; - constructor(private _renderer: Renderer, private _element: ElementRef) {} + constructor(private _renderer: Renderer2, private _element: ElementRef) {} /** Amount of rows that the grid tile takes up. */ @Input() @@ -43,7 +43,7 @@ export class MdGridTile { * "Changed after checked" errors that would occur with HostBinding. */ _setStyle(property: string, value: string): void { - this._renderer.setElementStyle(this._element.nativeElement, property, value); + this._renderer.setStyle(this._element.nativeElement, property, value); } } @@ -60,7 +60,7 @@ export class MdGridTileText implements AfterContentInit { _lineSetter: MdLineSetter; @ContentChildren(MdLine) _lines: QueryList; - constructor(private _renderer: Renderer, private _element: ElementRef) {} + constructor(private _renderer: Renderer2, private _element: ElementRef) {} ngAfterContentInit() { this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element); diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts index 81cf9fc1c5d0..7b4522632329 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -5,7 +5,7 @@ import { Input, OnChanges, OnInit, - Renderer, + Renderer2, SimpleChange, ViewEncapsulation, AfterViewChecked, @@ -98,7 +98,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { constructor( private _elementRef: ElementRef, - private _renderer: Renderer, + private _renderer: Renderer2, private _mdIconRegistry: MdIconRegistry) { } _updateColor(newColor: string) { @@ -109,7 +109,11 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { _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}`); + } } } @@ -177,7 +181,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { const ariaLabel = this._getAriaLabel(); if (ariaLabel && ariaLabel !== this._previousAriaLabel) { this._previousAriaLabel = ariaLabel; - this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-label', ariaLabel); + this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-label', ariaLabel); } } @@ -214,7 +218,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { // We would use renderer.detachView(Array.from(layoutElement.childNodes)) here, // but it fails in IE11: https://github.com/angular/angular/issues/6327 layoutElement.innerHTML = ''; - this._renderer.projectNodes(layoutElement, [svg]); + this._renderer.appendChild(layoutElement, svg); } private _updateFontIconClasses() { @@ -227,20 +231,20 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { this._mdIconRegistry.getDefaultFontSetClass(); if (fontSetClass != this._previousFontSetClass) { if (this._previousFontSetClass) { - this._renderer.setElementClass(elem, this._previousFontSetClass, false); + this._renderer.removeClass(elem, this._previousFontSetClass); } if (fontSetClass) { - this._renderer.setElementClass(elem, fontSetClass, true); + this._renderer.addClass(elem, fontSetClass); } this._previousFontSetClass = fontSetClass; } if (this.fontIcon != this._previousFontIconClass) { if (this._previousFontIconClass) { - this._renderer.setElementClass(elem, this._previousFontIconClass, false); + this._renderer.removeClass(elem, this._previousFontIconClass); } if (this.fontIcon) { - this._renderer.setElementClass(elem, this.fontIcon, true); + this._renderer.addClass(elem, this.fontIcon); } this._previousFontIconClass = this.fontIcon; } diff --git a/src/lib/input/autosize.spec.ts b/src/lib/input/autosize.spec.ts index be85b894181e..698c1ea5a575 100644 --- a/src/lib/input/autosize.spec.ts +++ b/src/lib/input/autosize.spec.ts @@ -25,7 +25,7 @@ describe('MdTextareaAutosize', () => { textarea = fixture.nativeElement.querySelector('textarea'); autosize = fixture.debugElement.query( - By.directive(MdTextareaAutosize)).injector.get(MdTextareaAutosize); + By.directive(MdTextareaAutosize)).injector.get(MdTextareaAutosize); }); it('should resize the textarea based on its content', () => { diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts index 2839b8845556..e7c2c3f6ad00 100644 --- a/src/lib/input/input-container.spec.ts +++ b/src/lib/input/input-container.spec.ts @@ -203,7 +203,7 @@ describe('MdInputContainer', function () { fixture.detectChanges(); let input = fixture.debugElement.query(By.directive(MdInputDirective)) - .injector.get(MdInputDirective) as MdInputDirective; + .injector.get(MdInputDirective); expect(input.value).toBeFalsy(); diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts index 210f77afd4ce..1bcc91da400b 100644 --- a/src/lib/input/input-container.ts +++ b/src/lib/input/input-container.ts @@ -12,7 +12,7 @@ import { Optional, Output, QueryList, - Renderer, + Renderer2, Self, ViewEncapsulation } from '@angular/core'; @@ -172,7 +172,7 @@ export class MdInputDirective { // 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.setElementProperty(this._elementRef.nativeElement, 'type', this._type); + this._renderer.setProperty(this._elementRef.nativeElement, 'type', this._type); } } @@ -206,7 +206,7 @@ export class MdInputDirective { ].filter(t => getSupportedInputTypes().has(t)); constructor(private _elementRef: ElementRef, - private _renderer: Renderer, + private _renderer: Renderer2, @Optional() @Self() public _ngControl: NgControl) { // Force setter to be called in case id was not specified. @@ -214,7 +214,7 @@ export class MdInputDirective { } /** Focuses the input element. */ - focus() { this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus'); } + focus() { this._elementRef.nativeElement.focus(); } _onFocus() { this.focused = true; } diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index d21f296d8386..f188934696d6 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -8,7 +8,7 @@ import { ElementRef, Input, Optional, - Renderer, + Renderer2, AfterContentInit, } from '@angular/core'; import {MdLine, MdLineSetter, coerceBooleanProperty} from '../core'; @@ -142,11 +142,14 @@ export class MdListItem implements AfterContentInit { @ContentChild(MdListAvatarCssMatStyler) set _hasAvatar(avatar: MdListAvatarCssMatStyler) { - this._renderer.setElementClass( - this._element.nativeElement, 'mat-list-item-avatar', avatar != null); + if (avatar != null) { + this._renderer.addClass(this._element.nativeElement, 'mat-list-item-avatar'); + } else { + this._renderer.removeClass(this._element.nativeElement, 'mat-list-item-avatar'); + } } - constructor(private _renderer: Renderer, + constructor(private _renderer: Renderer2, private _element: ElementRef, @Optional() private _list: MdList, @Optional() navList: MdNavListCssMatStyler) { diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts index 76d00955ce67..1f453302bf81 100644 --- a/src/lib/menu/menu-item.ts +++ b/src/lib/menu/menu-item.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, Renderer} from '@angular/core'; +import {Component, ElementRef, Input} from '@angular/core'; import {Focusable} from '../core/a11y/focus-key-manager'; import {coerceBooleanProperty} from '../core/coercion/boolean-property'; @@ -24,11 +24,11 @@ export class MdMenuItem implements Focusable { /** Whether the menu item is disabled */ private _disabled: boolean = false; - constructor(private _renderer: Renderer, private _elementRef: ElementRef) {} + constructor(private _elementRef: ElementRef) {} /** Focuses the menu item. */ focus(): void { - this._renderer.invokeElementMethod(this._getHostElement(), 'focus'); + this._getHostElement().focus(); } /** Whether the menu item is disabled. */ diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index b611138e935e..de18f2936790 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -7,7 +7,6 @@ import { OnDestroy, Optional, Output, - Renderer, ViewContainerRef, } from '@angular/core'; import {MdMenuPanel} from './menu-panel'; @@ -79,8 +78,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { @Output() onMenuClose = new EventEmitter(); constructor(private _overlay: Overlay, private _element: ElementRef, - private _viewContainerRef: ViewContainerRef, private _renderer: Renderer, - @Optional() private _dir: Dir) {} + private _viewContainerRef: ViewContainerRef, @Optional() private _dir: Dir) { } ngAfterViewInit() { this._checkMenu(); @@ -128,7 +126,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { /** Focuses the menu trigger. */ focus() { - this._renderer.invokeElementMethod(this._element.nativeElement, 'focus'); + this._element.nativeElement.focus(); } /** The text direction of the containing app. */ diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index c977f51e6e77..0da452957b65 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -1,5 +1,5 @@ import {async, ComponentFixture, TestBed, fakeAsync, 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 {MdRadioGroup, MdRadioButton, MdRadioChange, MdRadioModule} from './index'; @@ -48,7 +48,7 @@ describe('MdRadio', () => { groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup)); groupNativeElement = groupDebugElement.nativeElement; - groupInstance = groupDebugElement.injector.get(MdRadioGroup); + groupInstance = groupDebugElement.injector.get(MdRadioGroup); radioDebugElements = fixture.debugElement.queryAll(By.directive(MdRadioButton)); radioNativeElements = radioDebugElements.map(debugEl => debugEl.nativeElement); @@ -344,7 +344,7 @@ describe('MdRadio', () => { let groupInstance: MdRadioGroup; let radioInstances: MdRadioButton[]; let testComponent: RadioGroupWithNgModel; - let groupNgControl: NgControl; + let groupNgModel: NgModel; beforeEach(() => { fixture = TestBed.createComponent(RadioGroupWithNgModel); @@ -354,8 +354,8 @@ describe('MdRadio', () => { groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup)); groupNativeElement = groupDebugElement.nativeElement; - groupInstance = groupDebugElement.injector.get(MdRadioGroup); - groupNgControl = groupDebugElement.injector.get(NgControl); + groupInstance = groupDebugElement.injector.get(MdRadioGroup); + groupNgModel = groupDebugElement.injector.get(NgModel); radioDebugElements = fixture.debugElement.queryAll(By.directive(MdRadioButton)); radioInstances = radioDebugElements.map(debugEl => debugEl.componentInstance); @@ -392,27 +392,27 @@ describe('MdRadio', () => { it('should have the correct control state initially and after interaction', () => { // The control should start off valid, pristine, and untouched. - expect(groupNgControl.valid).toBe(true); - expect(groupNgControl.pristine).toBe(true); - expect(groupNgControl.touched).toBe(false); + expect(groupNgModel.valid).toBe(true); + expect(groupNgModel.pristine).toBe(true); + expect(groupNgModel.touched).toBe(false); // After changing the value programmatically, the control should stay pristine // but remain untouched. radioInstances[1].checked = true; fixture.detectChanges(); - expect(groupNgControl.valid).toBe(true); - expect(groupNgControl.pristine).toBe(true); - expect(groupNgControl.touched).toBe(false); + expect(groupNgModel.valid).toBe(true); + expect(groupNgModel.pristine).toBe(true); + expect(groupNgModel.touched).toBe(false); // After a user interaction occurs (such as a click), the control should become dirty and // now also be touched. radioLabelElements[2].click(); fixture.detectChanges(); - 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 write to the radio button based on ngModel', fakeAsync(() => { @@ -456,7 +456,7 @@ describe('MdRadio', () => { testComponent = fixture.debugElement.componentInstance; groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup)); - groupInstance = groupDebugElement.injector.get(MdRadioGroup); + groupInstance = groupDebugElement.injector.get(MdRadioGroup); }); it('should toggle the disabled state', () => { diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 0491bff81195..803380aeed5e 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -4,7 +4,7 @@ import { ContentChildren, Directive, ElementRef, - Renderer, + Renderer2, EventEmitter, Input, OnInit, @@ -407,7 +407,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy { constructor(@Optional() radioGroup: MdRadioGroup, private _elementRef: ElementRef, - private _renderer: Renderer, + private _renderer: Renderer2, private _focusOriginMonitor: FocusOriginMonitor, private _radioDispatcher: UniqueSelectionDispatcher) { // Assertions. Ideally these should be stripped out by the compiler. diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 7818196a09db..fa1acb75f05d 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -9,7 +9,7 @@ import { QueryList, ChangeDetectionStrategy, EventEmitter, - Renderer, + Renderer2, ViewEncapsulation, NgZone, OnDestroy, @@ -128,11 +128,7 @@ export class MdSidenav implements AfterContentInit, OnDestroy { * @param _elementRef The DOM element reference. Used for transition and width calculation. * If not available we do not hook on transitions. */ - constructor( - private _elementRef: ElementRef, - private _renderer: Renderer, - private _focusTrapFactory: FocusTrapFactory) { - + constructor(private _elementRef: ElementRef, private _focusTrapFactory: FocusTrapFactory) { this.onOpen.subscribe(() => { this._elementFocusedBeforeSidenavWasOpened = document.activeElement as HTMLElement; @@ -143,9 +139,9 @@ export class MdSidenav implements AfterContentInit, OnDestroy { this.onClose.subscribe(() => { if (this._elementFocusedBeforeSidenavWasOpened instanceof HTMLElement) { - this._renderer.invokeElementMethod(this._elementFocusedBeforeSidenavWasOpened, 'focus'); + this._elementFocusedBeforeSidenavWasOpened.focus(); } else { - this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'blur'); + this._elementRef.nativeElement.blur(); } this._elementFocusedBeforeSidenavWasOpened = null; @@ -350,7 +346,7 @@ export class MdSidenavContainer implements AfterContentInit { _enableTransitions = false; constructor(@Optional() private _dir: Dir, private _element: ElementRef, - private _renderer: Renderer, private _ngZone: NgZone) { + private _renderer: Renderer2, private _ngZone: NgZone) { // 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) { @@ -407,8 +403,12 @@ export class MdSidenavContainer implements AfterContentInit { } /** Toggles the 'mat-sidenav-opened' class on the main 'md-sidenav-container' element. */ - private _setContainerClass(sidenav: MdSidenav, bool: boolean): void { - this._renderer.setElementClass(this._element.nativeElement, 'mat-sidenav-opened', bool); + private _setContainerClass(sidenav: MdSidenav, isAdd: boolean): void { + if (isAdd) { + this._renderer.addClass(this._element.nativeElement, 'mat-sidenav-opened'); + } else { + this._renderer.removeClass(this._element.nativeElement, 'mat-sidenav-opened'); + } } /** Validate the state of the sidenav children components. */ diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts index 7f623a11a12a..88a825e46305 100644 --- a/src/lib/slide-toggle/slide-toggle.spec.ts +++ b/src/lib/slide-toggle/slide-toggle.spec.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; -import {FormsModule, NgControl, ReactiveFormsModule, FormControl} from '@angular/forms'; +import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms'; import {MdSlideToggle, MdSlideToggleChange, MdSlideToggleModule} from './index'; import {TestGestureConfig} from '../slider/test-gesture-config'; import {dispatchFakeEvent} from '../core/testing/dispatch-events'; @@ -29,7 +29,7 @@ describe('MdSlideToggle', () => { let testComponent: SlideToggleTestApp; let slideToggle: MdSlideToggle; let slideToggleElement: HTMLElement; - let slideToggleControl: NgControl; + let slideToggleModel: NgModel; let labelElement: HTMLLabelElement; let inputElement: HTMLInputElement; @@ -51,7 +51,7 @@ describe('MdSlideToggle', () => { slideToggle = slideToggleDebug.componentInstance; slideToggleElement = slideToggleDebug.nativeElement; - slideToggleControl = slideToggleDebug.injector.get(NgControl); + slideToggleModel = slideToggleDebug.injector.get(NgModel); inputElement = fixture.debugElement.query(By.css('input')).nativeElement; labelElement = fixture.debugElement.query(By.css('label')).nativeElement; })); @@ -291,37 +291,37 @@ describe('MdSlideToggle', () => { it('should have the correct control state initially and after interaction', () => { // The control should start off valid, pristine, and untouched. - expect(slideToggleControl.valid).toBe(true); - expect(slideToggleControl.pristine).toBe(true); - expect(slideToggleControl.touched).toBe(false); + expect(slideToggleModel.valid).toBe(true); + expect(slideToggleModel.pristine).toBe(true); + expect(slideToggleModel.touched).toBe(false); // After changing the value programmatically, the control should // become dirty (not pristine), but remain untouched. slideToggle.checked = true; fixture.detectChanges(); - expect(slideToggleControl.valid).toBe(true); - expect(slideToggleControl.pristine).toBe(false); - expect(slideToggleControl.touched).toBe(false); + expect(slideToggleModel.valid).toBe(true); + expect(slideToggleModel.pristine).toBe(false); + expect(slideToggleModel.touched).toBe(false); // After a user interaction occurs (such as a click), the control should remain dirty and // now also be touched. labelElement.click(); fixture.detectChanges(); - expect(slideToggleControl.valid).toBe(true); - expect(slideToggleControl.pristine).toBe(false); - expect(slideToggleControl.touched).toBe(true); + expect(slideToggleModel.valid).toBe(true); + expect(slideToggleModel.pristine).toBe(false); + expect(slideToggleModel.touched).toBe(true); }); it('should not set the control to touched when changing the state programmatically', () => { // The control should start off with being untouched. - expect(slideToggleControl.touched).toBe(false); + expect(slideToggleModel.touched).toBe(false); testComponent.slideChecked = true; fixture.detectChanges(); - expect(slideToggleControl.touched).toBe(false); + expect(slideToggleModel.touched).toBe(false); expect(slideToggleElement.classList).toContain('mat-checked'); // After a user interaction occurs (such as a click), the control should remain dirty and @@ -329,20 +329,20 @@ describe('MdSlideToggle', () => { inputElement.click(); fixture.detectChanges(); - expect(slideToggleControl.touched).toBe(true); + expect(slideToggleModel.touched).toBe(true); expect(slideToggleElement.classList).not.toContain('mat-checked'); }); // TODO(kara): update when core/testing adds fix it('should not set the control to touched when changing the model', async(() => { // The control should start off with being untouched. - expect(slideToggleControl.touched).toBe(false); + expect(slideToggleModel.touched).toBe(false); testComponent.slideModel = true; fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(slideToggleControl.touched).toBe(false); + expect(slideToggleModel.touched).toBe(false); expect(slideToggle.checked).toBe(true); expect(slideToggleElement.classList).toContain('mat-checked'); }); @@ -468,7 +468,7 @@ describe('MdSlideToggle', () => { let testComponent: SlideToggleTestApp; let slideToggle: MdSlideToggle; let slideToggleElement: HTMLElement; - let slideToggleControl: NgControl; + let slideToggleModel: NgModel; let slideThumbContainer: HTMLElement; let inputElement: HTMLInputElement; @@ -484,7 +484,7 @@ describe('MdSlideToggle', () => { slideToggle = slideToggleDebug.componentInstance; slideToggleElement = slideToggleDebug.nativeElement; - slideToggleControl = slideToggleDebug.injector.get(NgControl); + slideToggleModel = slideToggleDebug.injector.get(NgModel); slideThumbContainer = thumbContainerDebug.nativeElement; inputElement = slideToggleElement.querySelector('input'); diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 13ae686b28b0..0de98cbb0bcc 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -8,7 +8,7 @@ import { Input, OnDestroy, Output, - Renderer, + Renderer2, ViewChild, ViewEncapsulation } from '@angular/core'; @@ -120,7 +120,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase @ViewChild(MdRipple) _ripple: MdRipple; constructor(private _elementRef: ElementRef, - private _renderer: Renderer, + private _renderer: Renderer2, private _focusOriginMonitor: FocusOriginMonitor) { super(); } @@ -243,7 +243,11 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase 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}`); + } } } diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index 4cb452fe5e37..de561657883e 100644 --- a/src/lib/slider/slider.spec.ts +++ b/src/lib/slider/slider.spec.ts @@ -236,7 +236,7 @@ describe('MdSlider', () => { sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); testComponent = fixture.debugElement.componentInstance; sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); ticksContainerElement = @@ -331,7 +331,7 @@ describe('MdSlider', () => { sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -370,7 +370,7 @@ describe('MdSlider', () => { sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); }); @@ -563,7 +563,7 @@ describe('MdSlider', () => { sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -665,7 +665,7 @@ describe('MdSlider', () => { sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -714,7 +714,7 @@ describe('MdSlider', () => { sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); }); @@ -906,7 +906,7 @@ describe('MdSlider', () => { sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); }); it('should increment slider by 1 on up arrow pressed', () => { @@ -988,7 +988,7 @@ describe('MdSlider', () => { testComponent = fixture.debugElement.componentInstance; sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -1113,7 +1113,7 @@ describe('MdSlider', () => { testComponent = fixture.debugElement.componentInstance; sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MdSlider); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 8773e88e1a0c..bb54d732cfc0 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -7,7 +7,7 @@ import { OnDestroy, Optional, Output, - Renderer, + Renderer2, ViewEncapsulation } from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; @@ -380,7 +380,7 @@ export class MdSlider extends _MdSliderMixinBase return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr'; } - constructor(renderer: Renderer, private _elementRef: ElementRef, + constructor(renderer: Renderer2, private _elementRef: ElementRef, private _focusOriginMonitor: FocusOriginMonitor, @Optional() private _dir: Dir) { super(); this._focusOriginMonitor.monitor(this._elementRef.nativeElement, renderer, true) diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts index 519735f9363c..5378d327da19 100644 --- a/src/lib/snack-bar/snack-bar-container.ts +++ b/src/lib/snack-bar/snack-bar-container.ts @@ -4,7 +4,7 @@ import { ViewChild, NgZone, OnDestroy, - Renderer, + Renderer2, ElementRef, } from '@angular/core'; import { @@ -77,7 +77,7 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy { constructor( private _ngZone: NgZone, - private _renderer: Renderer, + private _renderer: Renderer2, private _elementRef: ElementRef) { super(); } @@ -92,7 +92,7 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy { // 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 this.snackBarConfig.extraClasses) { - this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, true); + this._renderer.addClass(this._elementRef.nativeElement, cssClass); } } diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts index ec2cacd37e8e..22705277ab57 100644 --- a/src/lib/tabs/ink-bar.ts +++ b/src/lib/tabs/ink-bar.ts @@ -1,4 +1,4 @@ -import {Directive, Renderer, ElementRef, NgZone} from '@angular/core'; +import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core'; /** @@ -13,7 +13,7 @@ import {Directive, Renderer, ElementRef, NgZone} from '@angular/core'; }) export class MdInkBar { constructor( - private _renderer: Renderer, + private _renderer: Renderer2, private _elementRef: ElementRef, private _ngZone: NgZone) {} @@ -27,9 +27,9 @@ export class MdInkBar { this._ngZone.runOutsideAngular(() => { requestAnimationFrame(() => { - this._renderer.setElementStyle(this._elementRef.nativeElement, 'left', + this._renderer.setStyle(this._elementRef.nativeElement, 'left', this._getLeftPosition(element)); - this._renderer.setElementStyle(this._elementRef.nativeElement, 'width', + this._renderer.setStyle(this._elementRef.nativeElement, 'width', this._getElementWidth(element)); }); }); @@ -37,12 +37,12 @@ export class MdInkBar { /** Shows the ink bar. */ show(): void { - this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'visible'); + this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'visible'); } /** Hides the ink bar. */ hide(): void { - this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); + this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); } /** diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index d8f5818474ae..7c1403cdfd9a 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -7,7 +7,7 @@ import { QueryList, ContentChildren, ElementRef, - Renderer + Renderer2, } from '@angular/core'; import {coerceBooleanProperty} from '../core'; import {Observable} from 'rxjs/Observable'; @@ -92,7 +92,7 @@ export class MdTabGroup { private _groupId: number; - constructor(private _renderer: Renderer) { + constructor(private _renderer: Renderer2) { this._groupId = nextId++; } @@ -167,13 +167,13 @@ export class MdTabGroup { _setTabBodyWrapperHeight(tabHeight: number): void { if (!this._dynamicHeight || !this._tabBodyWrapperHeight) { return; } - this._renderer.setElementStyle(this._tabBodyWrapper.nativeElement, 'height', + this._renderer.setStyle(this._tabBodyWrapper.nativeElement, '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.setElementStyle(this._tabBodyWrapper.nativeElement, 'height', + this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', tabHeight + 'px'); } } @@ -181,6 +181,6 @@ export class MdTabGroup { /** Removes the height of the tab body wrapper. */ _removeTabBodyWrapperHeight(): void { this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight; - this._renderer.setElementStyle(this._tabBodyWrapper.nativeElement, 'height', ''); + this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', ''); } } diff --git a/src/lib/tabs/tab-label-wrapper.ts b/src/lib/tabs/tab-label-wrapper.ts index d3fd75d9ee30..f7c2988c7aa8 100644 --- a/src/lib/tabs/tab-label-wrapper.ts +++ b/src/lib/tabs/tab-label-wrapper.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Renderer, Input} from '@angular/core'; +import {Directive, ElementRef, Input} from '@angular/core'; import {coerceBooleanProperty} from '../core/coercion/boolean-property'; @@ -13,7 +13,7 @@ import {coerceBooleanProperty} from '../core/coercion/boolean-property'; } }) export class MdTabLabelWrapper { - constructor(public elementRef: ElementRef, private _renderer: Renderer) {} + constructor(public elementRef: ElementRef) {} /** Whether the tab label is disabled. */ private _disabled: boolean = false; @@ -25,7 +25,7 @@ export class MdTabLabelWrapper { /** Sets focus on the wrapper element */ focus(): void { - this._renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus'); + this.elementRef.nativeElement.focus(); } getOffsetLeft(): number { diff --git a/src/lib/toolbar/toolbar.ts b/src/lib/toolbar/toolbar.ts index 49f6620437fb..fedf302fa950 100644 --- a/src/lib/toolbar/toolbar.ts +++ b/src/lib/toolbar/toolbar.ts @@ -5,7 +5,7 @@ import { ViewEncapsulation, Directive, ElementRef, - Renderer + Renderer2, } from '@angular/core'; @@ -33,7 +33,7 @@ export class MdToolbar { private _color: string; - constructor(private elementRef: ElementRef, private renderer: Renderer) { } + constructor(private _elementRef: ElementRef, private _renderer: Renderer2) { } /** The color of the toolbar. Can be primary, accent, or warn. */ @Input() @@ -53,7 +53,13 @@ export class MdToolbar { private _setElementColor(color: string, isAdd: boolean) { if (color != null && color != '') { - this.renderer.setElementClass(this.elementRef.nativeElement, `mat-${color}`, isAdd); + let element = this._elementRef.nativeElement; + + if (isAdd) { + this._renderer.addClass(element, `mat-${color}`); + } else { + this._renderer.removeClass(element, `mat-${color}`); + } } } diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index a6c9699f3f7d..a43b6265f69a 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -61,7 +61,7 @@ describe('MdTooltip', () => { fixture.detectChanges(); buttonDebugElement = fixture.debugElement.query(By.css('button')); buttonElement = buttonDebugElement.nativeElement; - tooltipDirective = buttonDebugElement.injector.get(MdTooltip); + tooltipDirective = buttonDebugElement.injector.get(MdTooltip); }); it('should show and hide the tooltip', fakeAsync(() => { @@ -362,7 +362,7 @@ describe('MdTooltip', () => { fixture.detectChanges(); buttonDebugElement = fixture.debugElement.query(By.css('button')); buttonElement = buttonDebugElement.nativeElement; - tooltipDirective = buttonDebugElement.injector.get(MdTooltip); + tooltipDirective = buttonDebugElement.injector.get(MdTooltip); }); it('should hide tooltip if clipped after changing positions', fakeAsync(() => { @@ -399,7 +399,7 @@ describe('MdTooltip', () => { fixture.detectChanges(); buttonDebugElement = fixture.debugElement.query(By.css('button')); buttonElement = buttonDebugElement.nativeElement; - tooltipDirective = buttonDebugElement.injector.get(MdTooltip); + tooltipDirective = buttonDebugElement.injector.get(MdTooltip); }); it('should show and hide the tooltip', fakeAsync(() => { diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index f0b258e19a7f..594e05cf5d8f 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -7,7 +7,7 @@ import { NgZone, Optional, OnDestroy, - Renderer, + Renderer2, OnInit, ChangeDetectorRef, } from '@angular/core'; @@ -152,7 +152,7 @@ export class MdTooltip implements OnInit, OnDestroy { private _scrollDispatcher: ScrollDispatcher, private _viewContainerRef: ViewContainerRef, private _ngZone: NgZone, - private _renderer: Renderer, + private _renderer: Renderer2, private _platform: Platform, @Optional() private _dir: Dir) {