Skip to content

Commit 1c03ac6

Browse files
crisbetocrisbeto
committed
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)`.
1 parent f16affc commit 1c03ac6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+263
-222
lines changed

‎src/demo-app/style/style-demo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Renderer} from '@angular/core';
1+
import {Component, Renderer2} from '@angular/core';
22
import {FocusOriginMonitor} from '@angular/material';
33

44

@@ -9,5 +9,5 @@ import {FocusOriginMonitor} from '@angular/material';
99
styleUrls: ['style-demo.css'],
1010
})
1111
export class StyleDemo {
12-
constructor(public renderer: Renderer, public fom: FocusOriginMonitor) {}
12+
constructor(public renderer: Renderer2, public fom: FocusOriginMonitor) {}
1313
}

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

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
ComponentFixture,
66
TestBed,
77
} from '@angular/core/testing';
8-
import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
8+
import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
99
import {Component, DebugElement} from '@angular/core';
1010
import {By} from '@angular/platform-browser';
1111
import {
@@ -56,7 +56,7 @@ describe('MdButtonToggle', () => {
5656

5757
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
5858
groupNativeElement = groupDebugElement.nativeElement;
59-
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
59+
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
6060

6161
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
6262

@@ -215,7 +215,7 @@ describe('MdButtonToggle', () => {
215215
let groupInstance: MdButtonToggleGroup;
216216
let buttonToggleInstances: MdButtonToggle[];
217217
let testComponent: ButtonToggleGroupWithNgModel;
218-
let groupNgControl: NgControl;
218+
let groupNgModel: NgModel;
219219

220220
beforeEach(async(() => {
221221
fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
@@ -225,8 +225,8 @@ describe('MdButtonToggle', () => {
225225

226226
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
227227
groupNativeElement = groupDebugElement.nativeElement;
228-
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
229-
groupNgControl = groupDebugElement.injector.get(NgControl);
228+
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
229+
groupNgModel = groupDebugElement.injector.get<NgModel>(NgModel);
230230

231231
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
232232
buttonToggleNativeElements =
@@ -259,28 +259,29 @@ describe('MdButtonToggle', () => {
259259
expect(groupInstance.selected.value).toBe(groupInstance.value);
260260
});
261261

262-
it('should have the correct ngControl state initially and after interaction', fakeAsync(() => {
263-
expect(groupNgControl.valid).toBe(true);
264-
expect(groupNgControl.pristine).toBe(true);
265-
expect(groupNgControl.touched).toBe(false);
262+
it('should have the correct FormControl state initially and after interaction',
263+
fakeAsync(() => {
264+
expect(groupNgModel.valid).toBe(true);
265+
expect(groupNgModel.pristine).toBe(true);
266+
expect(groupNgModel.touched).toBe(false);
266267

267-
buttonToggleInstances[1].checked = true;
268-
fixture.detectChanges();
269-
tick();
268+
buttonToggleInstances[1].checked = true;
269+
fixture.detectChanges();
270+
tick();
270271

271-
expect(groupNgControl.valid).toBe(true);
272-
expect(groupNgControl.pristine).toBe(false);
273-
expect(groupNgControl.touched).toBe(false);
272+
expect(groupNgModel.valid).toBe(true);
273+
expect(groupNgModel.pristine).toBe(false);
274+
expect(groupNgModel.touched).toBe(false);
274275

275-
let nativeRadioLabel = buttonToggleDebugElements[2].query(By.css('label')).nativeElement;
276-
nativeRadioLabel.click();
277-
fixture.detectChanges();
278-
tick();
276+
let nativeRadioLabel = buttonToggleDebugElements[2].query(By.css('label')).nativeElement;
277+
nativeRadioLabel.click();
278+
fixture.detectChanges();
279+
tick();
279280

280-
expect(groupNgControl.valid).toBe(true);
281-
expect(groupNgControl.pristine).toBe(false);
282-
expect(groupNgControl.touched).toBe(true);
283-
}));
281+
expect(groupNgModel.valid).toBe(true);
282+
expect(groupNgModel.pristine).toBe(false);
283+
expect(groupNgModel.touched).toBe(true);
284+
}));
284285

285286
it('should update the ngModel value when selecting a button toggle', fakeAsync(() => {
286287
buttonToggleInstances[1].checked = true;
@@ -301,7 +302,7 @@ describe('MdButtonToggle', () => {
301302
let groupInstance: MdButtonToggleGroup;
302303
let buttonToggleInstances: MdButtonToggle[];
303304
let testComponent: ButtonToggleGroupWithNgModel;
304-
let groupNgControl: NgControl;
305+
let groupNgModel: NgModel;
305306

306307
beforeEach(async(() => {
307308
fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
@@ -310,8 +311,8 @@ describe('MdButtonToggle', () => {
310311

311312
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
312313
groupNativeElement = groupDebugElement.nativeElement;
313-
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
314-
groupNgControl = groupDebugElement.injector.get(NgControl);
314+
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
315+
groupNgModel = groupDebugElement.injector.get<NgModel>(NgModel);
315316

316317
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
317318
buttonToggleNativeElements =
@@ -341,7 +342,8 @@ describe('MdButtonToggle', () => {
341342
let fixture = TestBed.createComponent(ButtonToggleGroupWithInitialValue);
342343
let testComponent = fixture.debugElement.componentInstance;
343344
let groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
344-
let groupInstance: MdButtonToggleGroup = groupDebugElement.injector.get(MdButtonToggleGroup);
345+
let groupInstance: MdButtonToggleGroup = groupDebugElement.injector
346+
.get<MdButtonToggleGroup>(MdButtonToggleGroup);
345347

346348
fixture.detectChanges();
347349

@@ -376,7 +378,8 @@ describe('MdButtonToggle', () => {
376378

377379
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple));
378380
groupNativeElement = groupDebugElement.nativeElement;
379-
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroupMultiple);
381+
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroupMultiple>(
382+
MdButtonToggleGroupMultiple);
380383

381384
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
382385
buttonToggleNativeElements = buttonToggleDebugElements
@@ -479,7 +482,7 @@ describe('MdButtonToggle', () => {
479482
testComponent = fixture.debugElement.componentInstance;
480483

481484
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
482-
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
485+
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
483486
}));
484487

485488
it('should toggle the disabled state', () => {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
ContentChildren,
44
Directive,
55
ElementRef,
6-
Renderer,
6+
Renderer2,
77
EventEmitter,
88
HostBinding,
99
Input,
@@ -374,7 +374,7 @@ export class MdButtonToggle implements OnInit {
374374
constructor(@Optional() toggleGroup: MdButtonToggleGroup,
375375
@Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
376376
private _buttonToggleDispatcher: UniqueSelectionDispatcher,
377-
private _renderer: Renderer,
377+
private _renderer: Renderer2,
378378
private _elementRef: ElementRef,
379379
private _focusOriginMonitor: FocusOriginMonitor) {
380380
this.buttonToggleGroup = toggleGroup;
@@ -412,7 +412,7 @@ export class MdButtonToggle implements OnInit {
412412

413413
/** Focuses the button. */
414414
focus() {
415-
this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
415+
this._inputElement.nativeElement.focus();
416416
}
417417

418418
/** Toggle the state of the current button toggle. */

‎src/lib/button/button.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
HostBinding,
77
Input,
88
OnDestroy,
9-
Renderer,
9+
Renderer2,
1010
ViewEncapsulation
1111
} from '@angular/core';
1212
import {coerceBooleanProperty, FocusOriginMonitor} from '../core';
@@ -120,7 +120,7 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
120120
get disableRipple() { return this._disableRipple; }
121121
set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
122122

123-
constructor(private _elementRef: ElementRef, private _renderer: Renderer,
123+
constructor(private _elementRef: ElementRef, private _renderer: Renderer2,
124124
private _focusOriginMonitor: FocusOriginMonitor) {
125125
super();
126126
this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
@@ -143,13 +143,17 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
143143

144144
_setElementColor(color: string, isAdd: boolean) {
145145
if (color != null && color != '') {
146-
this._renderer.setElementClass(this._getHostElement(), `mat-${color}`, isAdd);
146+
if (isAdd) {
147+
this._renderer.addClass(this._getHostElement(), `mat-${color}`);
148+
} else {
149+
this._renderer.removeClass(this._getHostElement(), `mat-${color}`);
150+
}
147151
}
148152
}
149153

150154
/** Focuses the button. */
151155
focus(): void {
152-
this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
156+
this._getHostElement().focus();
153157
}
154158

155159
_getHostElement() {
@@ -191,7 +195,7 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
191195
encapsulation: ViewEncapsulation.None
192196
})
193197
export class MdAnchor extends MdButton {
194-
constructor(elementRef: ElementRef, renderer: Renderer, focusOriginMonitor: FocusOriginMonitor) {
198+
constructor(elementRef: ElementRef, renderer: Renderer2, focusOriginMonitor: FocusOriginMonitor) {
195199
super(elementRef, renderer, focusOriginMonitor);
196200
}
197201

‎src/lib/checkbox/checkbox.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
TestBed,
77
tick,
88
} from '@angular/core/testing';
9-
import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
9+
import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
1010
import {Component, DebugElement} from '@angular/core';
1111
import {By} from '@angular/platform-browser';
1212
import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './index';
@@ -691,11 +691,11 @@ describe('MdCheckbox', () => {
691691
flushMicrotasks();
692692

693693
let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox));
694-
let ngControl = <NgControl> checkboxElement.injector.get(NgControl);
694+
let ngModel = checkboxElement.injector.get<NgModel>(NgModel);
695695

696-
expect(ngControl.valid).toBe(true);
697-
expect(ngControl.pristine).toBe(true);
698-
expect(ngControl.touched).toBe(false);
696+
expect(ngModel.valid).toBe(true);
697+
expect(ngModel.pristine).toBe(true);
698+
expect(ngModel.touched).toBe(false);
699699

700700
// TODO(jelbourn): test that `touched` and `pristine` state are modified appropriately.
701701
// This is currently blocked on issues with async() and fakeAsync().

‎src/lib/checkbox/checkbox.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Input,
1010
OnDestroy,
1111
Output,
12-
Renderer,
12+
Renderer2,
1313
ViewChild,
1414
ViewEncapsulation,
1515
} from '@angular/core';
@@ -181,7 +181,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase
181181
/** Reference to the focused state ripple. */
182182
private _focusRipple: RippleRef;
183183

184-
constructor(private _renderer: Renderer,
184+
constructor(private _renderer: Renderer2,
185185
private _elementRef: ElementRef,
186186
private _changeDetectorRef: ChangeDetectorRef,
187187
private _focusOriginMonitor: FocusOriginMonitor) {
@@ -251,7 +251,11 @@ export class MdCheckbox extends _MdCheckboxMixinBase
251251

252252
_setElementColor(color: string, isAdd: boolean) {
253253
if (color != null && color != '') {
254-
this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
254+
if (isAdd) {
255+
this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
256+
} else {
257+
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
258+
}
255259
}
256260
}
257261

@@ -303,15 +307,15 @@ export class MdCheckbox extends _MdCheckboxMixinBase
303307
return;
304308
}
305309
if (this._currentAnimationClass.length > 0) {
306-
renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, false);
310+
renderer.removeClass(elementRef.nativeElement, this._currentAnimationClass);
307311
}
308312

309313
this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(
310314
oldState, newState);
311315
this._currentCheckState = newState;
312316

313317
if (this._currentAnimationClass.length > 0) {
314-
renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, true);
318+
renderer.addClass(elementRef.nativeElement, this._currentAnimationClass);
315319
}
316320
}
317321

‎src/lib/chips/chip.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
OnDestroy,
77
OnInit,
88
Output,
9-
Renderer
9+
Renderer2,
1010
} from '@angular/core';
1111

1212
import {Focusable} from '../core/a11y/focus-key-manager';
@@ -58,7 +58,7 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
5858
/** Emitted when the chip is destroyed. */
5959
@Output() destroy = new EventEmitter<MdChipEvent>();
6060

61-
constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) { }
61+
constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef) { }
6262

6363
ngOnInit(): void {
6464
this._addDefaultCSSClass();
@@ -119,7 +119,7 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
119119

120120
/** Allows for programmatic focusing of the chip. */
121121
focus(): void {
122-
this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus');
122+
this._elementRef.nativeElement.focus();
123123
this.onFocus.emit({chip: this});
124124
}
125125

@@ -139,12 +139,12 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
139139
let el: HTMLElement = this._elementRef.nativeElement;
140140

141141
// Always add the `mat-chip` class
142-
el.classList.add('mat-chip');
142+
this._renderer.addClass(el, 'mat-chip');
143143

144144
// If we are a basic chip, also add the `mat-basic-chip` class for :not() targeting
145145
if (el.nodeName.toLowerCase() == 'mat-basic-chip' || el.hasAttribute('mat-basic-chip') ||
146146
el.nodeName.toLowerCase() == 'md-basic-chip' || el.hasAttribute('md-basic-chip')) {
147-
el.classList.add('mat-basic-chip');
147+
this._renderer.addClass(el, 'mat-basic-chip');
148148
}
149149
}
150150

@@ -158,7 +158,11 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
158158
/** Sets the mat-color on the native element. */
159159
private _setElementColor(color: string, isAdd: boolean) {
160160
if (color != null && color != '') {
161-
this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
161+
if (isAdd) {
162+
this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
163+
} else {
164+
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
165+
}
162166
}
163167
}
164168
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {
22
Injectable,
3-
OpaqueToken,
3+
InjectionToken,
44
Optional,
55
Inject,
66
SkipSelf,
77
} from '@angular/core';
88

9-
export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new OpaqueToken('liveAnnouncerElement');
9+
export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken<HTMLElement>('liveAnnouncerElement');
1010

1111
/** Possible politeness levels. */
1212
export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';

‎src/lib/core/compatibility/compatibility.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
NgModule,
33
ModuleWithProviders,
44
Directive,
5-
OpaqueToken,
65
Inject,
76
Optional,
87
isDevMode,
@@ -12,7 +11,7 @@ import {
1211
import {DOCUMENT} from '@angular/platform-browser';
1312
import {MdError} from '../errors/error';
1413

15-
export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode');
14+
export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');
1615

1716
/** Injection token that configures whether the Material sanity checks are enabled. */
1817
export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('md-sanity-checks');

0 commit comments

Comments
 (0)