From 2cf3860e591896103c9980e28635948b71ec7a85 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 21 Nov 2017 17:59:04 +0100 Subject: [PATCH] refactor: remove renderer usages (#8235) Removes any usages of the Renderer2 from the codebase. They're no longer necessary after Angular switched to Domino which is closer to the native DOM API. --- .../creating-a-custom-form-field-control.md | 11 ++++---- src/cdk/a11y/focus-monitor.spec.ts | 6 ++--- src/cdk/overlay/overlay-directives.ts | 25 ++++++++----------- .../connected-position-strategy.spec.ts | 2 +- src/cdk/scrolling/scrollable.ts | 16 +++++------- src/cdk/table/cell.ts | 10 ++++---- src/cdk/table/table.ts | 5 ++-- src/demo-app/demo-app/demo-app.ts | 7 +++--- src/lib/button/button.ts | 13 ++++------ src/lib/checkbox/checkbox.ts | 16 +++++------- src/lib/chips/chip-list.ts | 6 ++--- src/lib/chips/chip.ts | 8 +++--- src/lib/core/common-behaviors/color.spec.ts | 8 +----- src/lib/core/common-behaviors/color.ts | 13 +++++----- src/lib/core/line/line.ts | 8 +++--- src/lib/datepicker/datepicker-input.ts | 6 ++--- src/lib/form-field/form-field.ts | 7 +++--- src/lib/grid-list/grid-list.ts | 8 ++---- src/lib/grid-list/grid-tile.ts | 9 +++---- src/lib/icon/icon.ts | 24 ++++++++---------- src/lib/input/input.ts | 8 +++--- src/lib/list/list.ts | 14 +++++------ src/lib/list/selection-list.ts | 6 ++--- src/lib/progress-spinner/progress-spinner.ts | 20 +++++++-------- src/lib/radio/radio.ts | 9 +++---- src/lib/select/select.ts | 6 ++--- src/lib/sidenav/drawer.ts | 10 +++----- src/lib/slide-toggle/slide-toggle.ts | 9 +++---- src/lib/slider/slider.ts | 8 +++--- src/lib/snack-bar/snack-bar-container.ts | 19 +++++--------- src/lib/stepper/step-header.ts | 8 +++--- src/lib/table/cell.ts | 16 ++++++------ src/lib/tabs/ink-bar.ts | 14 +++++------ src/lib/tabs/tab-group.ts | 24 ++++++++---------- src/lib/tabs/tab-header.ts | 5 +--- src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 14 +++++------ src/lib/toolbar/toolbar.ts | 7 +++--- src/lib/tooltip/tooltip.ts | 21 ++++++++-------- 38 files changed, 176 insertions(+), 250 deletions(-) diff --git a/guides/creating-a-custom-form-field-control.md b/guides/creating-a-custom-form-field-control.md index e421d9a28cd..479670ec508 100644 --- a/guides/creating-a-custom-form-field-control.md +++ b/guides/creating-a-custom-form-field-control.md @@ -58,7 +58,7 @@ class MyTelInput { tel = tel || new MyTel('', '', ''); this.parts.setValue({area: tel.area, exchange: tel.exchange, subscriber: tel.subscriber}); } - + constructor(fb: FormBuilder) { this.parts = fb.group({ 'area': '', @@ -98,7 +98,7 @@ the `MatFormFieldControl` interface, see the #### `value` This property allows someone to set or get the value of our control. Its type should be the same -type we used for the type parameter when we implemented `MatFormFieldControl`. Since our component +type we used for the type parameter when we implemented `MatFormFieldControl`. Since our component already has a value property, we don't need to do anything for this one. #### `stateChanges` @@ -185,10 +185,9 @@ need to remember to emit on the `stateChanges` stream so change detection can ha ```ts focused = false; -constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef, - renderer: Renderer2) { +constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) { ... - fm.monitor(elRef.nativeElement, renderer, true).subscribe(origin => { + fm.monitor(elRef.nativeElement, true).subscribe(origin => { this.focused = !!origin; this.stateChanges.next(); }); @@ -307,7 +306,7 @@ just need to apply the given IDs to our host element. ```ts @HostBinding('attr.aria-describedby') describedBy = ''; - + setDescribedByIds(ids: string[]) { this.describedBy = ids.join(' '); } diff --git a/src/cdk/a11y/focus-monitor.spec.ts b/src/cdk/a11y/focus-monitor.spec.ts index 7cb6b426c6f..1b53d56be5d 100644 --- a/src/cdk/a11y/focus-monitor.spec.ts +++ b/src/cdk/a11y/focus-monitor.spec.ts @@ -1,6 +1,6 @@ import {TAB} from '@angular/cdk/keycodes'; import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing'; -import {Component, Renderer2} from '@angular/core'; +import {Component} from '@angular/core'; import {ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {FocusMonitor, FocusOrigin, TOUCH_BUFFER_MS} from './focus-monitor'; @@ -378,9 +378,7 @@ describe('cdkMonitorFocus', () => { @Component({ template: `` }) -class PlainButton { - constructor(public renderer: Renderer2) {} -} +class PlainButton {} @Component({ diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts index ebd5dc7e5ea..d9261639d29 100644 --- a/src/cdk/overlay/overlay-directives.ts +++ b/src/cdk/overlay/overlay-directives.ts @@ -21,7 +21,6 @@ import { OnDestroy, Optional, Output, - Renderer2, SimpleChanges, TemplateRef, ViewContainerRef, @@ -36,6 +35,7 @@ import { } from './position/connected-position'; import {ConnectedPositionStrategy} from './position/connected-position-strategy'; import {RepositionScrollStrategy, ScrollStrategy} from './scroll/index'; +import {DOCUMENT} from '@angular/common'; /** Default set of positions for the overlay. Follows the behavior of a dropdown. */ @@ -97,7 +97,6 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { private _offsetX: number = 0; private _offsetY: number = 0; private _position: ConnectedPositionStrategy; - private _escapeListener = () => {}; /** Origin for the connected overlay. */ @Input('cdkConnectedOverlayOrigin') origin: CdkOverlayOrigin; @@ -230,11 +229,11 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { constructor( private _overlay: Overlay, - private _renderer: Renderer2, templateRef: TemplateRef, viewContainerRef: ViewContainerRef, @Inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy, - @Optional() private _dir: Directionality) { + @Optional() private _dir: Directionality, + @Optional() @Inject(DOCUMENT) private _document: any) { this._templatePortal = new TemplatePortal(templateRef, viewContainerRef); } @@ -335,7 +334,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { this._position.withDirection(this.dir); this._overlayRef.getConfig().direction = this.dir; - this._initEscapeListener(); + this._document.addEventListener('keydown', this._escapeListener); if (!this._overlayRef.hasAttached()) { this._overlayRef.attach(this._templatePortal); @@ -357,7 +356,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { } this._backdropSubscription.unsubscribe(); - this._escapeListener(); + this._document.removeEventListener('keydown', this._escapeListener); } /** Destroys the overlay created by this directive. */ @@ -368,15 +367,13 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { this._backdropSubscription.unsubscribe(); this._positionSubscription.unsubscribe(); - this._escapeListener(); + this._document.removeEventListener('keydown', this._escapeListener); } - /** Sets the event listener that closes the overlay when pressing Escape. */ - private _initEscapeListener() { - this._escapeListener = this._renderer.listen('document', 'keydown', (event: KeyboardEvent) => { - if (event.keyCode === ESCAPE) { - this._detachOverlay(); - } - }); + /** Event listener that will close the overlay when the user presses escape. */ + private _escapeListener = (event: KeyboardEvent) => { + if (event.keyCode === ESCAPE) { + this._detachOverlay(); + } } } diff --git a/src/cdk/overlay/position/connected-position-strategy.spec.ts b/src/cdk/overlay/position/connected-position-strategy.spec.ts index 2d6b9572c1d..ad3c99137eb 100644 --- a/src/cdk/overlay/position/connected-position-strategy.spec.ts +++ b/src/cdk/overlay/position/connected-position-strategy.spec.ts @@ -592,7 +592,7 @@ describe('ConnectedPositionStrategy', () => { {overlayX: 'start', overlayY: 'top'}); strategy.withScrollableContainers([ - new CdkScrollable(new FakeElementRef(scrollable), null!, null!, null!)]); + new CdkScrollable(new FakeElementRef(scrollable), null!, null!)]); strategy.attach(fakeOverlayRef(overlayElement)); positionChangeHandler = jasmine.createSpy('positionChangeHandler'); onPositionChangeSubscription = strategy.onPositionChange.subscribe(positionChangeHandler); diff --git a/src/cdk/scrolling/scrollable.ts b/src/cdk/scrolling/scrollable.ts index 7c4ff9d5528..3d9fb8a6d0b 100644 --- a/src/cdk/scrolling/scrollable.ts +++ b/src/cdk/scrolling/scrollable.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, OnInit, OnDestroy, NgZone, Renderer2} from '@angular/core'; +import {Directive, ElementRef, OnInit, OnDestroy, NgZone} from '@angular/core'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; import {ScrollDispatcher} from './scroll-dispatcher'; @@ -22,18 +22,15 @@ import {ScrollDispatcher} from './scroll-dispatcher'; }) export class CdkScrollable implements OnInit, OnDestroy { private _elementScrolled: Subject = new Subject(); - private _scrollListener: Function | null; + private _scrollListener = (event: Event) => this._elementScrolled.next(event); constructor(private _elementRef: ElementRef, private _scroll: ScrollDispatcher, - private _ngZone: NgZone, - private _renderer: Renderer2) {} + private _ngZone: NgZone) {} ngOnInit() { - this._scrollListener = this._ngZone.runOutsideAngular(() => { - return this._renderer.listen(this.getElementRef().nativeElement, 'scroll', (event: Event) => { - this._elementScrolled.next(event); - }); + this._ngZone.runOutsideAngular(() => { + this.getElementRef().nativeElement.addEventListener('scroll', this._scrollListener); }); this._scroll.register(this); @@ -43,8 +40,7 @@ export class CdkScrollable implements OnInit, OnDestroy { this._scroll.deregister(this); if (this._scrollListener) { - this._scrollListener(); - this._scrollListener = null; + this.getElementRef().nativeElement.removeEventListener('scroll', this._scrollListener); } } diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index d0d735e3017..5c5edba081a 100644 --- a/src/cdk/table/cell.ts +++ b/src/cdk/table/cell.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {ContentChild, Directive, ElementRef, Input, Renderer2, TemplateRef} from '@angular/core'; +import {ContentChild, Directive, ElementRef, Input, TemplateRef} from '@angular/core'; /** * Cell definition for a CDK table. @@ -64,8 +64,8 @@ export class CdkColumnDef { }, }) export class CdkHeaderCell { - constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2) { - renderer.addClass(elementRef.nativeElement, `cdk-column-${columnDef.cssClassFriendlyName}`); + constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { + elementRef.nativeElement.classList.add(`cdk-column-${columnDef.cssClassFriendlyName}`); } } @@ -78,7 +78,7 @@ export class CdkHeaderCell { }, }) export class CdkCell { - constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2) { - renderer.addClass(elementRef.nativeElement, `cdk-column-${columnDef.cssClassFriendlyName}`); + constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { + elementRef.nativeElement.classList.add(`cdk-column-${columnDef.cssClassFriendlyName}`); } } diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index cbc944fa058..76c3cb412db 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -23,7 +23,6 @@ import { IterableDiffers, NgIterable, QueryList, - Renderer2, TrackByFunction, ViewChild, ViewContainerRef, @@ -170,10 +169,10 @@ export class CdkTable implements CollectionViewer { constructor(private readonly _differs: IterableDiffers, private readonly _changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, - renderer: Renderer2, @Attribute('role') role: string) { + if (!role) { - renderer.setAttribute(elementRef.nativeElement, 'role', 'grid'); + elementRef.nativeElement.setAttribute('role', 'grid'); } } diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 5fcfd9a1c68..579efc8966e 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -7,7 +7,7 @@ */ import {OverlayContainer} from '@angular/cdk/overlay'; -import {Component, ElementRef, Renderer2, ViewEncapsulation} from '@angular/core'; +import {Component, ElementRef, ViewEncapsulation} from '@angular/core'; /** * The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component, @@ -91,7 +91,6 @@ export class DemoApp { constructor( private _element: ElementRef, - private _renderer: Renderer2, private _overlayContainer: OverlayContainer) {} toggleFullscreen() { @@ -113,10 +112,10 @@ export class DemoApp { this.dark = !this.dark; if (this.dark) { - this._renderer.addClass(this._element.nativeElement, darkThemeClass); + this._element.nativeElement.classList.add(darkThemeClass); this._overlayContainer.getContainerElement().classList.add(darkThemeClass); } else { - this._renderer.removeClass(this._element.nativeElement, darkThemeClass); + this._element.nativeElement.classList.remove(darkThemeClass); this._overlayContainer.getContainerElement().classList.remove(darkThemeClass); } } diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index d3300a14fb7..f4d29fc28b4 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -17,7 +17,6 @@ import { Inject, OnDestroy, Optional, - Renderer2, Self, ViewEncapsulation, } from '@angular/core'; @@ -104,7 +103,7 @@ export class MatMiniFab { // Boilerplate for applying mixins to MatButton. /** @docs-private */ export class MatButtonBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase))); @@ -136,11 +135,10 @@ export class MatButton extends _MatButtonMixinBase /** Whether the button is icon button. */ _isIconButton: boolean = this._hasHostAttributes('mat-icon-button'); - constructor(renderer: Renderer2, - elementRef: ElementRef, + constructor(elementRef: ElementRef, private _platform: Platform, private _focusMonitor: FocusMonitor) { - super(renderer, elementRef); + super(elementRef); this._focusMonitor.monitor(this._elementRef.nativeElement, true); } @@ -198,9 +196,8 @@ export class MatAnchor extends MatButton { constructor( platform: Platform, focusMonitor: FocusMonitor, - elementRef: ElementRef, - renderer: Renderer2) { - super(renderer, elementRef, platform, focusMonitor); + elementRef: ElementRef) { + super(elementRef, platform, focusMonitor); } _haltDisabledEvents(event: Event) { diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 331504286d0..aabeb801ea6 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -20,7 +20,6 @@ import { Input, OnDestroy, Output, - Renderer2, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -79,7 +78,7 @@ export class MatCheckboxChange { // Boilerplate for applying mixins to MatCheckbox. /** @docs-private */ export class MatCheckboxBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatCheckboxMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent')); @@ -197,13 +196,11 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc /** Reference to the focused state ripple. */ private _focusRipple: RippleRef | null; - constructor(renderer: Renderer2, - elementRef: ElementRef, + constructor(elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef, private _focusMonitor: FocusMonitor, @Attribute('tabindex') tabIndex: string) { - super(renderer, elementRef); - + super(elementRef); this.tabIndex = parseInt(tabIndex) || 0; } @@ -309,14 +306,13 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc private _transitionCheckState(newState: TransitionCheckState) { let oldState = this._currentCheckState; - let renderer = this._renderer; - let elementRef = this._elementRef; + let element: HTMLElement = this._elementRef.nativeElement; if (oldState === newState) { return; } if (this._currentAnimationClass.length > 0) { - renderer.removeClass(elementRef.nativeElement, this._currentAnimationClass); + element.classList.remove(this._currentAnimationClass); } this._currentAnimationClass = this._getAnimationClassForCheckStateTransition( @@ -324,7 +320,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc this._currentCheckState = newState; if (this._currentAnimationClass.length > 0) { - renderer.addClass(elementRef.nativeElement, this._currentAnimationClass); + element.classList.add(this._currentAnimationClass); } } diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index a0a94d46164..c5e0451731a 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -26,7 +26,6 @@ import { Optional, Output, QueryList, - Renderer2, Self, ViewEncapsulation, } from '@angular/core'; @@ -311,8 +310,7 @@ export class MatChipList implements MatFormFieldControl, ControlValueAccess /** The chip components contained within this chip list. */ @ContentChildren(MatChip) chips: QueryList; - constructor(protected _renderer: Renderer2, - protected _elementRef: ElementRef, + constructor(protected _elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef, @Optional() private _dir: Directionality, @Optional() private _parentForm: NgForm, @@ -392,7 +390,7 @@ export class MatChipList implements MatFormFieldControl, ControlValueAccess // Implemented as part of ControlValueAccessor setDisabledState(disabled: boolean): void { this.disabled = disabled; - this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', disabled); + this._elementRef.nativeElement.disabled = disabled; this.stateChanges.next(); } diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index fb3e268e55b..38106026beb 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -16,7 +16,6 @@ import { Input, OnDestroy, Output, - Renderer2, } from '@angular/core'; import {CanColor, CanDisable, mixinColor, mixinDisabled} from '@angular/material/core'; import {Subject} from 'rxjs/Subject'; @@ -37,8 +36,7 @@ export class MatChipSelectionChange { // Boilerplate for applying mixins to MatChip. /** @docs-private */ export class MatChipBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) { - } + constructor(public _elementRef: ElementRef) {} } export const _MatChipMixinBase = mixinColor(mixinDisabled(MatChipBase), 'primary'); @@ -171,8 +169,8 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes return this.selectable ? this.selected.toString() : null; } - constructor(renderer: Renderer2, public _elementRef: ElementRef) { - super(renderer, _elementRef); + constructor(public _elementRef: ElementRef) { + super(_elementRef); } ngOnDestroy(): void { diff --git a/src/lib/core/common-behaviors/color.spec.ts b/src/lib/core/common-behaviors/color.spec.ts index 0b7a86a235f..2e3bcbca6bc 100644 --- a/src/lib/core/common-behaviors/color.spec.ts +++ b/src/lib/core/common-behaviors/color.spec.ts @@ -1,5 +1,5 @@ import {mixinColor} from './color'; -import {ElementRef, Renderer2} from '@angular/core'; +import {ElementRef} from '@angular/core'; describe('MixinColor', () => { @@ -72,12 +72,6 @@ describe('MixinColor', () => { class TestClass { testElement: HTMLElement = document.createElement('div'); - /** Mock of a RendererV2 for the color mixin. */ - _renderer: Renderer2 = { - addClass: (element: HTMLElement, className: string) => element.classList.add(className), - removeClass: (element: HTMLElement, className: string) => element.classList.remove(className) - } as any; - /** Fake instance of an ElementRef. */ _elementRef = new ElementRef(this.testElement); } diff --git a/src/lib/core/common-behaviors/color.ts b/src/lib/core/common-behaviors/color.ts index 026d8fd6b83..c96f1d41d41 100644 --- a/src/lib/core/common-behaviors/color.ts +++ b/src/lib/core/common-behaviors/color.ts @@ -7,7 +7,7 @@ */ import {Constructor} from './constructor'; -import {ElementRef, Renderer2} from '@angular/core'; +import {ElementRef} from '@angular/core'; /** @docs-private */ export interface CanColor { @@ -15,8 +15,7 @@ export interface CanColor { } /** @docs-private */ -export interface HasRenderer { - _renderer: Renderer2; +export interface HasElementRef { _elementRef: ElementRef; } @@ -24,8 +23,8 @@ export interface HasRenderer { export type ThemePalette = 'primary' | 'accent' | 'warn' | undefined; /** Mixin to augment a directive with a `color` property. */ -export function mixinColor>(base: T, defaultColor?: ThemePalette) - : Constructor & T { +export function mixinColor>(base: T, + defaultColor?: ThemePalette): Constructor & T { return class extends base { private _color: ThemePalette; @@ -35,10 +34,10 @@ export function mixinColor>(base: T, defaultC if (colorPalette !== this._color) { if (this._color) { - this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`); + this._elementRef.nativeElement.classList.remove(`mat-${this._color}`); } if (colorPalette) { - this._renderer.addClass(this._elementRef.nativeElement, `mat-${colorPalette}`); + this._elementRef.nativeElement.classList.add(`mat-${colorPalette}`); } this._color = colorPalette; diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts index 3bcfb3d6f59..f840efde8e5 100644 --- a/src/lib/core/line/line.ts +++ b/src/lib/core/line/line.ts @@ -9,7 +9,6 @@ import { NgModule, Directive, - Renderer2, ElementRef, QueryList, } from '@angular/core'; @@ -32,8 +31,7 @@ export class MatLine {} * @docs-private */ export class MatLineSetter { - constructor(private _lines: QueryList, private _renderer: Renderer2, - private _element: ElementRef) { + constructor(private _lines: QueryList, private _element: ElementRef) { this._setLineClass(this._lines.length); this._lines.changes.subscribe(() => { @@ -58,9 +56,9 @@ export class MatLineSetter { private _setClass(className: string, isAdd: boolean): void { if (isAdd) { - this._renderer.addClass(this._element.nativeElement, className); + this._element.nativeElement.classList.add(className); } else { - this._renderer.removeClass(this._element.nativeElement, className); + this._element.nativeElement.classList.remove(className); } } diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts index 4b06adaf958..f659cbce5cb 100644 --- a/src/lib/datepicker/datepicker-input.ts +++ b/src/lib/datepicker/datepicker-input.ts @@ -19,7 +19,6 @@ import { OnDestroy, Optional, Output, - Renderer2 } from '@angular/core'; import { AbstractControl, @@ -122,8 +121,8 @@ export class MatDatepickerInput implements AfterContentInit, ControlValueAcce value = this._getValidDateOrNull(value); let oldDate = this.value; this._value = value; - this._renderer.setProperty(this._elementRef.nativeElement, 'value', - value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : ''); + this._elementRef.nativeElement.value = + value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : ''; if (!this._dateAdapter.sameDate(oldDate, value)) { this._valueChange.emit(value); } @@ -222,7 +221,6 @@ export class MatDatepickerInput implements AfterContentInit, ControlValueAcce constructor( private _elementRef: ElementRef, - private _renderer: Renderer2, @Optional() private _dateAdapter: DateAdapter, @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, @Optional() private _formField: MatFormField) { diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index 1397b95c4d6..c3fda637f18 100644 --- a/src/lib/form-field/form-field.ts +++ b/src/lib/form-field/form-field.ts @@ -23,7 +23,7 @@ import { Inject, Input, Optional, - QueryList, Renderer2, + QueryList, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -163,7 +163,6 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte constructor( public _elementRef: ElementRef, - private _renderer: Renderer2, private _changeDetectorRef: ChangeDetectorRef, @Optional() @Inject(MAT_PLACEHOLDER_GLOBAL_OPTIONS) placeholderOptions: PlaceholderOptions) { this._placeholderOptions = placeholderOptions ? placeholderOptions : {}; @@ -173,8 +172,8 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte ngAfterContentInit() { this._validateControlChild(); if (this._control.controlType) { - this._renderer.addClass( - this._elementRef.nativeElement, `mat-form-field-type-${this._control.controlType}`); + this._elementRef.nativeElement.classList + .add(`mat-form-field-type-${this._control.controlType}`); } // Subscribe to changes in the child control state in order to update the form field UI. diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index 185f18fd543..e99d54ef621 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -14,7 +14,6 @@ import { Input, ContentChildren, QueryList, - Renderer2, ElementRef, Optional, ChangeDetectionStrategy, @@ -69,10 +68,7 @@ export class MatGridList implements OnInit, AfterContentChecked { /** Query list of tiles that are being rendered. */ @ContentChildren(MatGridTile) _tiles: QueryList; - constructor( - private _renderer: Renderer2, - private _element: ElementRef, - @Optional() private _dir: Directionality) {} + constructor(private _element: ElementRef, @Optional() private _dir: Directionality) {} /** Amount of columns in the grid list. */ @Input() @@ -155,7 +151,7 @@ export class MatGridList implements OnInit, AfterContentChecked { /** Sets style on the main grid-list element, given the style name and value. */ _setListStyle(style: [string, string | null] | null): void { if (style) { - this._renderer.setStyle(this._element.nativeElement, style[0], style[1]); + this._element.nativeElement.style[style[0]] = style[1]; } } } diff --git a/src/lib/grid-list/grid-tile.ts b/src/lib/grid-list/grid-tile.ts index d1708c0a1a3..6d79b5a177c 100644 --- a/src/lib/grid-list/grid-tile.ts +++ b/src/lib/grid-list/grid-tile.ts @@ -9,7 +9,6 @@ import { Component, ViewEncapsulation, - Renderer2, ElementRef, Input, ContentChildren, @@ -38,7 +37,7 @@ export class MatGridTile { _rowspan: number = 1; _colspan: number = 1; - constructor(private _renderer: Renderer2, private _element: ElementRef) {} + constructor(private _element: ElementRef) {} /** Amount of rows that the grid tile takes up. */ @Input() @@ -55,7 +54,7 @@ export class MatGridTile { * "Changed after checked" errors that would occur with HostBinding. */ _setStyle(property: string, value: any): void { - this._renderer.setStyle(this._element.nativeElement, property, value); + this._element.nativeElement.style[property] = value; } } @@ -75,10 +74,10 @@ export class MatGridTileText implements AfterContentInit { _lineSetter: MatLineSetter; @ContentChildren(MatLine) _lines: QueryList; - constructor(private _renderer: Renderer2, private _element: ElementRef) {} + constructor(private _element: ElementRef) {} ngAfterContentInit() { - this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element); + this._lineSetter = new MatLineSetter(this._lines, this._element); } } diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts index 2781befbdba..e99a4449b3e 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -15,7 +15,6 @@ import { Input, OnChanges, OnInit, - Renderer2, SimpleChanges, ViewEncapsulation, } from '@angular/core'; @@ -26,7 +25,7 @@ import {MatIconRegistry} from './icon-registry'; // Boilerplate for applying mixins to MatIcon. /** @docs-private */ export class MatIconBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatIconMixinBase = mixinColor(MatIconBase); @@ -88,16 +87,15 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can private _previousFontIconClass: string; constructor( - renderer: Renderer2, elementRef: ElementRef, private _iconRegistry: MatIconRegistry, @Attribute('aria-hidden') ariaHidden: string) { - super(renderer, elementRef); + super(elementRef); // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is // the right thing to do for the majority of icon use-cases. if (!ariaHidden) { - renderer.setAttribute(elementRef.nativeElement, 'aria-hidden', 'true'); + elementRef.nativeElement.setAttribute('aria-hidden', 'true'); } } @@ -160,17 +158,17 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can private _setSvgElement(svg: SVGElement) { this._clearSvgElement(); - this._renderer.appendChild(this._elementRef.nativeElement, svg); + this._elementRef.nativeElement.appendChild(svg); } private _clearSvgElement() { - const layoutElement = this._elementRef.nativeElement; + const layoutElement: HTMLElement = this._elementRef.nativeElement; const childCount = layoutElement.childNodes.length; // Remove existing child nodes and add the new SVG element. Note that we can't // use innerHTML, because IE will throw if the element has a data binding. for (let i = 0; i < childCount; i++) { - this._renderer.removeChild(layoutElement, layoutElement.childNodes[i]); + layoutElement.removeChild(layoutElement.childNodes[i]); } } @@ -179,27 +177,27 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can return; } - const elem = this._elementRef.nativeElement; + const elem: HTMLElement = this._elementRef.nativeElement; const fontSetClass = this.fontSet ? this._iconRegistry.classNameForFontAlias(this.fontSet) : this._iconRegistry.getDefaultFontSetClass(); if (fontSetClass != this._previousFontSetClass) { if (this._previousFontSetClass) { - this._renderer.removeClass(elem, this._previousFontSetClass); + elem.classList.remove(this._previousFontSetClass); } if (fontSetClass) { - this._renderer.addClass(elem, fontSetClass); + elem.classList.add(fontSetClass); } this._previousFontSetClass = fontSetClass; } if (this.fontIcon != this._previousFontIconClass) { if (this._previousFontIconClass) { - this._renderer.removeClass(elem, this._previousFontIconClass); + elem.classList.remove(this._previousFontIconClass); } if (this.fontIcon) { - this._renderer.addClass(elem, this.fontIcon); + elem.classList.add(this.fontIcon); } this._previousFontIconClass = this.fontIcon; } diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index cc4f82bc787..4f5667c7782 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -17,8 +17,7 @@ import { OnChanges, OnDestroy, Optional, - Renderer2, - Self + Self, } from '@angular/core'; import {FormControl, FormGroupDirective, NgControl, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; @@ -124,7 +123,7 @@ export class MatInput implements MatFormFieldControl, OnChanges, OnDestroy, // input element. To ensure that bindings for `type` work, we need to sync the setter // with the native property. Textarea elements don't support the type property or attribute. if (!this._isTextarea() && getSupportedInputTypes().has(this._type)) { - this._renderer.setProperty(this._elementRef.nativeElement, 'type', this._type); + this._elementRef.nativeElement.type = this._type; } } @@ -156,7 +155,6 @@ export class MatInput implements MatFormFieldControl, OnChanges, OnDestroy, ].filter(t => getSupportedInputTypes().has(t)); constructor(protected _elementRef: ElementRef, - protected _renderer: Renderer2, protected _platform: Platform, @Optional() @Self() public ngControl: NgControl, @Optional() protected _parentForm: NgForm, @@ -176,7 +174,7 @@ export class MatInput implements MatFormFieldControl, OnChanges, OnDestroy, // key. In order to get around this we need to "jiggle" the caret loose. Since this bug only // exists on iOS, we only bother to install the listener on iOS. if (_platform.IOS) { - _renderer.listen(_elementRef.nativeElement, 'keyup', (event: Event) => { + _elementRef.nativeElement.addEventListener('keyup', (event: Event) => { let el = event.target as HTMLInputElement; if (!el.value && !el.selectionStart && !el.selectionEnd) { // Note: Just setting `0, 0` doesn't fix the issue. Setting `1, 1` fixes it for the first diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index b132d989323..6cd9efcd0f9 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -16,7 +16,6 @@ import { ElementRef, Optional, QueryList, - Renderer2, ViewEncapsulation, } from '@angular/core'; import {CanDisableRipple, MatLine, MatLineSetter, mixinDisableRipple} from '@angular/material/core'; @@ -144,14 +143,13 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn @ContentChild(MatListAvatarCssMatStyler) set _hasAvatar(avatar: MatListAvatarCssMatStyler) { if (avatar != null) { - this._renderer.addClass(this._element.nativeElement, 'mat-list-item-avatar'); + this._element.nativeElement.classList.add('mat-list-item-avatar'); } else { - this._renderer.removeClass(this._element.nativeElement, 'mat-list-item-avatar'); + this._element.nativeElement.classList.remove('mat-list-item-avatar'); } } - constructor(private _renderer: Renderer2, - private _element: ElementRef, + constructor(private _element: ElementRef, @Optional() private _list: MatList, @Optional() navList: MatNavListCssMatStyler) { super(); @@ -159,7 +157,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn } ngAfterContentInit() { - this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element); + this._lineSetter = new MatLineSetter(this._lines, this._element); } /** Whether this list item should show a ripple effect when clicked. */ @@ -168,11 +166,11 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn } _handleFocus() { - this._renderer.addClass(this._element.nativeElement, 'mat-list-item-focus'); + this._element.nativeElement.classList.add('mat-list-item-focus'); } _handleBlur() { - this._renderer.removeClass(this._element.nativeElement, 'mat-list-item-focus'); + this._element.nativeElement.classList.remove('mat-list-item-focus'); } /** Retrieves the DOM element of the component host. */ diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index 26b8d014673..def298abe63 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -27,7 +27,6 @@ import { Optional, Output, QueryList, - Renderer2, ViewEncapsulation, } from '@angular/core'; import { @@ -125,8 +124,7 @@ export class MatListOption extends _MatListOptionMixinBase /** Emitted when the option is selected or deselected. */ @Output() selectionChange = new EventEmitter(); - constructor(private _renderer: Renderer2, - private _element: ElementRef, + constructor(private _element: ElementRef, private _changeDetector: ChangeDetectorRef, @Optional() @Inject(forwardRef(() => MatSelectionList)) public selectionList: MatSelectionList) { @@ -140,7 +138,7 @@ export class MatListOption extends _MatListOptionMixinBase } ngAfterContentInit() { - this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element); + this._lineSetter = new MatLineSetter(this._lines, this._element); } ngOnDestroy(): void { diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index c4db3d0016e..f0d3b6fb9f6 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/src/lib/progress-spinner/progress-spinner.ts @@ -11,7 +11,6 @@ import { ChangeDetectionStrategy, Input, ElementRef, - Renderer2, SimpleChanges, OnChanges, ViewEncapsulation, @@ -41,7 +40,7 @@ const BASE_STROKE_WIDTH = 10; // Boilerplate for applying mixins to MatProgressSpinner. /** @docs-private */ export class MatProgressSpinnerBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary'); @@ -151,10 +150,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements } } - constructor(public _renderer: Renderer2, public _elementRef: ElementRef, - platform: Platform, @Optional() @Inject(DOCUMENT) private _document: any) { - super(_renderer, _elementRef); + constructor(public _elementRef: ElementRef, + platform: Platform, + @Optional() @Inject(DOCUMENT) private _document: any) { + super(_elementRef); this._fallbackAnimation = platform.EDGE || platform.TRIDENT; // On IE and Edge, we can't animate the `stroke-dashoffset` @@ -162,7 +162,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements const animationClass = `mat-progress-spinner-indeterminate${this._fallbackAnimation ? '-fallback' : ''}-animation`; - _renderer.addClass(_elementRef.nativeElement, animationClass); + _elementRef.nativeElement.classList.add(animationClass); } ngOnChanges(changes: SimpleChanges) { @@ -211,8 +211,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements let styleTag = MatProgressSpinner.styleTag; if (!styleTag) { - styleTag = this._renderer.createElement('style'); - this._renderer.appendChild(this._document.head, styleTag); + styleTag = this._document.createElement('style'); + this._document.head.appendChild(styleTag); MatProgressSpinner.styleTag = styleTag; } @@ -258,9 +258,9 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements preserveWhitespaces: false, }) export class MatSpinner extends MatProgressSpinner { - constructor(renderer: Renderer2, elementRef: ElementRef, platform: Platform, + constructor(elementRef: ElementRef, platform: Platform, @Optional() @Inject(DOCUMENT) document: any) { - super(renderer, elementRef, platform, document); + super(elementRef, platform, document); this.mode = 'indeterminate'; } } diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 2d675060b09..f7e2b72b4c0 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -26,7 +26,6 @@ import { Optional, Output, QueryList, - Renderer2, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -315,7 +314,7 @@ export class MatRadioGroup extends _MatRadioGroupMixinBase // Boilerplate for applying mixins to MatRadioButton. /** @docs-private */ export class MatRadioButtonBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } // As per Material design specifications the selection control radio should use the accent color // palette by default. https://material.io/guidelines/components/selection-controls.html @@ -494,11 +493,10 @@ export class MatRadioButton extends _MatRadioButtonMixinBase constructor(@Optional() radioGroup: MatRadioGroup, elementRef: ElementRef, - renderer: Renderer2, private _changeDetector: ChangeDetectorRef, private _focusMonitor: FocusMonitor, private _radioDispatcher: UniqueSelectionDispatcher) { - super(renderer, elementRef); + super(elementRef); // Assertions. Ideally these should be stripped out by the compiler. // TODO(jelbourn): Assert that there's no name binding AND a parent radio group. @@ -538,7 +536,8 @@ export class MatRadioButton extends _MatRadioButtonMixinBase } ngAfterViewInit() { - this._focusMonitor.monitor(this._inputElement.nativeElement, false) + this._focusMonitor + .monitor(this._inputElement.nativeElement, false) .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin)); } diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 5688af37e37..f7c8c668b2f 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -46,7 +46,6 @@ import { Optional, Output, QueryList, - Renderer2, Self, SimpleChanges, ViewChild, @@ -143,7 +142,7 @@ export class MatSelectChange { // Boilerplate for applying mixins to MatSelect. /** @docs-private */ export class MatSelectBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatSelectMixinBase = mixinTabIndex(mixinDisabled(MatSelectBase)); @@ -453,7 +452,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, private _changeDetectorRef: ChangeDetectorRef, private _ngZone: NgZone, private _defaultErrorStateMatcher: ErrorStateMatcher, - renderer: Renderer2, elementRef: ElementRef, @Optional() private _dir: Directionality, @Optional() private _parentForm: NgForm, @@ -463,7 +461,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, @Attribute('tabindex') tabIndex: string, @Inject(MAT_SELECT_SCROLL_STRATEGY) private _scrollStrategyFactory) { - super(renderer, elementRef); + super(elementRef); if (this.ngControl) { this.ngControl.valueAccessor = this; diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index e444a96ca82..934eb5795b6 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -27,7 +27,6 @@ import { Optional, Output, QueryList, - Renderer2, ViewEncapsulation, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; @@ -435,8 +434,7 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy { _contentMargins = new Subject<{left: number, right: number}>(); constructor(@Optional() private _dir: Directionality, private _element: ElementRef, - private _renderer: Renderer2, private _ngZone: NgZone, - private _changeDetectorRef: ChangeDetectorRef) { + private _ngZone: NgZone, private _changeDetectorRef: ChangeDetectorRef) { // If a `Dir` directive exists up the tree, listen direction changes and update the left/right // properties to point to the proper start/end. if (_dir != null) { @@ -493,7 +491,7 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy { // Set the transition class on the container so that the animations occur. This should not // be set initially because animations should only be triggered via a change in state. if (event.toState !== 'open-instant') { - this._renderer.addClass(this._element.nativeElement, 'mat-drawer-transition'); + this._element.nativeElement.classList.add('mat-drawer-transition'); } this._updateContentMargins(); @@ -537,9 +535,9 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy { /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */ private _setContainerClass(isAdd: boolean): void { if (isAdd) { - this._renderer.addClass(this._element.nativeElement, 'mat-drawer-opened'); + this._element.nativeElement.classList.add('mat-drawer-opened'); } else { - this._renderer.removeClass(this._element.nativeElement, 'mat-drawer-opened'); + this._element.nativeElement.classList.remove('mat-drawer-opened'); } } diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 786e3227af3..3d525f5265e 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -21,7 +21,6 @@ import { Input, OnDestroy, Output, - Renderer2, ViewChild, ViewEncapsulation } from '@angular/core'; @@ -59,7 +58,7 @@ export class MatSlideToggleChange { // Boilerplate for applying mixins to MatSlideToggle. /** @docs-private */ export class MatSlideToggleBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatSlideToggleMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent')); @@ -140,20 +139,20 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro @ViewChild(MatRipple) _ripple: MatRipple; constructor(elementRef: ElementRef, - renderer: Renderer2, private _platform: Platform, private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef, @Attribute('tabindex') tabIndex: string) { - super(renderer, elementRef); + super(elementRef); this.tabIndex = parseInt(tabIndex) || 0; } ngAfterContentInit() { this._slideRenderer = new SlideToggleRenderer(this._elementRef, this._platform); - this._focusMonitor.monitor(this._inputElement.nativeElement, false) + this._focusMonitor + .monitor(this._inputElement.nativeElement, false) .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin)); } diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 50de5eafb2e..ace527ba1b4 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -32,7 +32,6 @@ import { OnInit, Optional, Output, - Renderer2, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -86,7 +85,7 @@ export class MatSliderChange { // Boilerplate for applying mixins to MatSlider. /** @docs-private */ export class MatSliderBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatSliderMixinBase = mixinTabIndex(mixinColor(mixinDisabled(MatSliderBase), 'accent')); @@ -418,13 +417,12 @@ export class MatSlider extends _MatSliderMixinBase return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr'; } - constructor(renderer: Renderer2, - elementRef: ElementRef, + constructor(elementRef: ElementRef, private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef, @Optional() private _dir: Directionality, @Attribute('tabindex') tabIndex: string) { - super(renderer, elementRef); + super(elementRef); this.tabIndex = parseInt(tabIndex) || 0; } diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts index cf544a10d2b..42e8b813509 100644 --- a/src/lib/snack-bar/snack-bar-container.ts +++ b/src/lib/snack-bar/snack-bar-container.ts @@ -13,7 +13,6 @@ import { ViewChild, NgZone, OnDestroy, - Renderer2, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, @@ -92,7 +91,6 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy constructor( private _ngZone: NgZone, - private _renderer: Renderer2, private _elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef) { super(); @@ -104,24 +102,19 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy throw Error('Attempting to attach snack bar content after content is already attached'); } + const element: HTMLElement = this._elementRef.nativeElement; + if (this.snackBarConfig.panelClass || this.snackBarConfig.extraClasses) { - const classes = [ - ...this._getCssClasses(this.snackBarConfig.panelClass), - ...this._getCssClasses(this.snackBarConfig.extraClasses) - ]; - // Not the most efficient way of adding classes, but the renderer doesn't allow us - // to pass in an array or a space-separated list. - for (let cssClass of classes) { - this._renderer.addClass(this._elementRef.nativeElement, cssClass); - } + element.classList.add(...this._getCssClasses(this.snackBarConfig.panelClass), + ...this._getCssClasses(this.snackBarConfig.extraClasses)); } if (this.snackBarConfig.horizontalPosition === 'center') { - this._renderer.addClass(this._elementRef.nativeElement, 'mat-snack-bar-center'); + element.classList.add('mat-snack-bar-center'); } if (this.snackBarConfig.verticalPosition === 'top') { - this._renderer.addClass(this._elementRef.nativeElement, 'mat-snack-bar-top'); + element.classList.add('mat-snack-bar-top'); } return this._portalOutlet.attachComponentPortal(portal); diff --git a/src/lib/stepper/step-header.ts b/src/lib/stepper/step-header.ts index d629665835b..37e1f331e39 100644 --- a/src/lib/stepper/step-header.ts +++ b/src/lib/stepper/step-header.ts @@ -77,10 +77,10 @@ export class MatStepHeader implements OnDestroy { private _optional: boolean; constructor( - public _intl: MatStepperIntl, - private _focusMonitor: FocusMonitor, - private _element: ElementRef, - changeDetectorRef: ChangeDetectorRef) { + public _intl: MatStepperIntl, + private _focusMonitor: FocusMonitor, + private _element: ElementRef, + changeDetectorRef: ChangeDetectorRef) { _focusMonitor.monitor(_element.nativeElement, true); this._intlSubscription = _intl.changes.subscribe(() => changeDetectorRef.markForCheck()); } diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts index ed1b0296449..e6f4c662fb1 100644 --- a/src/lib/table/cell.ts +++ b/src/lib/table/cell.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, Input, Renderer2} from '@angular/core'; +import {Directive, ElementRef, Input} from '@angular/core'; import { CdkCell, CdkCellDef, @@ -65,10 +65,9 @@ export class MatColumnDef extends _MatColumnDef { }) export class MatHeaderCell extends _MatHeaderCell { constructor(columnDef: CdkColumnDef, - elementRef: ElementRef, - renderer: Renderer2) { - super(columnDef, elementRef, renderer); - renderer.addClass(elementRef.nativeElement, `mat-column-${columnDef.cssClassFriendlyName}`); + elementRef: ElementRef) { + super(columnDef, elementRef); + elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); } } @@ -82,9 +81,8 @@ export class MatHeaderCell extends _MatHeaderCell { }) export class MatCell extends _MatCell { constructor(columnDef: CdkColumnDef, - elementRef: ElementRef, - renderer: Renderer2) { - super(columnDef, elementRef, renderer); - renderer.addClass(elementRef.nativeElement, `mat-column-${columnDef.cssClassFriendlyName}`); + elementRef: ElementRef) { + super(columnDef, elementRef); + elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); } } diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts index 75c4b6bb815..4e3c677d849 100644 --- a/src/lib/tabs/ink-bar.ts +++ b/src/lib/tabs/ink-bar.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone} from '@angular/core'; /** @@ -21,7 +21,6 @@ import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core'; }) export class MatInkBar { constructor( - private _renderer: Renderer2, private _elementRef: ElementRef, private _ngZone: NgZone) {} @@ -44,12 +43,12 @@ export class MatInkBar { /** Shows the ink bar. */ show(): void { - this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'visible'); + this._elementRef.nativeElement.style.visibility = 'visible'; } /** Hides the ink bar. */ hide(): void { - this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); + this._elementRef.nativeElement.style.visibility = 'hidden'; } /** @@ -57,10 +56,9 @@ export class MatInkBar { * @param element */ private _setStyles(element: HTMLElement) { - const left = element ? (element.offsetLeft || 0) + 'px' : '0'; - const width = element ? (element.offsetWidth || 0) + 'px' : '0'; + const inkBar: HTMLElement = this._elementRef.nativeElement; - this._renderer.setStyle(this._elementRef.nativeElement, 'left', left); - this._renderer.setStyle(this._elementRef.nativeElement, 'width', width); + inkBar.style.left = element ? (element.offsetLeft || 0) + 'px' : '0'; + inkBar.style.top = element ? (element.offsetWidth || 0) + 'px' : '0'; } } diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index da581c60b5b..b526f1deb81 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -19,7 +19,6 @@ import { OnDestroy, Output, QueryList, - Renderer2, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -52,7 +51,7 @@ export type MatTabHeaderPosition = 'above' | 'below'; // Boilerplate for applying mixins to MatTabGroup. /** @docs-private */ export class MatTabGroupBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBase), 'primary'); @@ -122,12 +121,12 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn @Input() get backgroundColor(): ThemePalette { return this._backgroundColor; } set backgroundColor(value: ThemePalette) { - let nativeElement = this._elementRef.nativeElement; + const nativeElement: HTMLElement = this._elementRef.nativeElement; - this._renderer.removeClass(nativeElement, `mat-background-${this.backgroundColor}`); + nativeElement.classList.remove(`mat-background-${this.backgroundColor}`); if (value) { - this._renderer.addClass(nativeElement, `mat-background-${value}`); + nativeElement.classList.add(`mat-background-${value}`); } this._backgroundColor = value; @@ -152,10 +151,9 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn private _groupId: number; - constructor(_renderer: Renderer2, - elementRef: ElementRef, + constructor(elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef) { - super(_renderer, elementRef); + super(elementRef); this._groupId = nextId++; } @@ -265,21 +263,21 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn _setTabBodyWrapperHeight(tabHeight: number): void { if (!this._dynamicHeight || !this._tabBodyWrapperHeight) { return; } - this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', - this._tabBodyWrapperHeight + 'px'); + const wrapper: HTMLElement = this._tabBodyWrapper.nativeElement; + + wrapper.style.height = this._tabBodyWrapperHeight + 'px'; // This conditional forces the browser to paint the height so that // the animation to the new height can have an origin. if (this._tabBodyWrapper.nativeElement.offsetHeight) { - this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', - tabHeight + 'px'); + wrapper.style.height = tabHeight + 'px'; } } /** Removes the height of the tab body wrapper. */ _removeTabBodyWrapperHeight(): void { this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight; - this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', ''); + this._tabBodyWrapper.nativeElement.style.height = ''; } /** Handle click events, setting new selected index if appropriate. */ diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index 31b62051ba2..7fe8d25be64 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -23,7 +23,6 @@ import { Optional, Output, QueryList, - Renderer2, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -134,7 +133,6 @@ export class MatTabHeader extends _MatTabHeaderMixinBase @Output() indexFocused = new EventEmitter(); constructor(private _elementRef: ElementRef, - private _renderer: Renderer2, private _changeDetectorRef: ChangeDetectorRef, private _viewportRuler: ViewportRuler, @Optional() private _dir: Directionality) { @@ -305,8 +303,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase const scrollDistance = this.scrollDistance; const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance; - this._renderer.setStyle(this._tabList.nativeElement, 'transform', - `translate3d(${translateX}px, 0, 0)`); + this._tabList.nativeElement.style.transform = `translate3d(${translateX}px, 0, 0)`; } /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */ diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts index 95b4f7843b6..da9c40358dc 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts @@ -26,7 +26,6 @@ import { OnDestroy, Optional, QueryList, - Renderer2, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -53,7 +52,7 @@ import {MatInkBar} from '../ink-bar'; // Boilerplate for applying mixins to MatTabNav. /** @docs-private */ export class MatTabNavBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatTabNavMixinBase = mixinDisableRipple(mixinColor(MatTabNavBase, 'primary')); @@ -92,12 +91,12 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit, @Input() get backgroundColor(): ThemePalette { return this._backgroundColor; } set backgroundColor(value: ThemePalette) { - let nativeElement = this._elementRef.nativeElement; + const nativeElement: HTMLElement = this._elementRef.nativeElement; - this._renderer.removeClass(nativeElement, `mat-background-${this.backgroundColor}`); + nativeElement.classList.remove(`mat-background-${this.backgroundColor}`); if (value) { - this._renderer.addClass(nativeElement, `mat-background-${value}`); + nativeElement.classList.add(`mat-background-${value}`); } this._backgroundColor = value; @@ -112,13 +111,12 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit, } private _disableRipple: boolean = false; - constructor(renderer: Renderer2, - elementRef: ElementRef, + constructor(elementRef: ElementRef, @Optional() private _dir: Directionality, private _ngZone: NgZone, private _changeDetectorRef: ChangeDetectorRef, private _viewportRuler: ViewportRuler) { - super(renderer, elementRef); + super(elementRef); } /** Notifies the component that the active link has been changed. */ diff --git a/src/lib/toolbar/toolbar.ts b/src/lib/toolbar/toolbar.ts index e9781cedf32..2da02fbf50a 100644 --- a/src/lib/toolbar/toolbar.ts +++ b/src/lib/toolbar/toolbar.ts @@ -15,7 +15,6 @@ import { ElementRef, isDevMode, QueryList, - Renderer2, ViewEncapsulation } from '@angular/core'; import {CanColor, mixinColor} from '@angular/material/core'; @@ -24,7 +23,7 @@ import {Platform} from '@angular/cdk/platform'; // Boilerplate for applying mixins to MatToolbar. /** @docs-private */ export class MatToolbarBase { - constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} + constructor(public _elementRef: ElementRef) {} } export const _MatToolbarMixinBase = mixinColor(MatToolbarBase); @@ -56,8 +55,8 @@ export class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterV /** Reference to all toolbar row elements that have been projected. */ @ContentChildren(MatToolbarRow) _toolbarRows: QueryList; - constructor(renderer: Renderer2, elementRef: ElementRef, private _platform: Platform) { - super(renderer, elementRef); + constructor(elementRef: ElementRef, private _platform: Platform) { + super(elementRef); } ngAfterViewInit() { diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index d1c243b532a..c41a731f46a 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -39,7 +39,6 @@ import { NgZone, OnDestroy, Optional, - Renderer2, ViewContainerRef, ViewEncapsulation, } from '@angular/core'; @@ -163,11 +162,9 @@ export class MatTooltip implements OnDestroy { } } - private _enterListener: Function; - private _leaveListener: Function; + private _manualListeners = new Map(); constructor( - renderer: Renderer2, private _overlay: Overlay, private _elementRef: ElementRef, private _scrollDispatcher: ScrollDispatcher, @@ -182,10 +179,11 @@ export class MatTooltip implements OnDestroy { // The mouse events shouldn't be bound on iOS devices, because // they can prevent the first tap from firing its click event. if (!_platform.IOS) { - this._enterListener = - renderer.listen(_elementRef.nativeElement, 'mouseenter', () => this.show()); - this._leaveListener = - renderer.listen(_elementRef.nativeElement, 'mouseleave', () => this.hide()); + this._manualListeners.set('mouseenter', () => this.show()); + this._manualListeners.set('mouseleave', () => this.hide()); + + this._manualListeners + .forEach((listener, event) => _elementRef.nativeElement.addEventListener(event, listener)); } _focusMonitor.monitor(_elementRef.nativeElement, false).subscribe(origin => { @@ -208,8 +206,11 @@ export class MatTooltip implements OnDestroy { // Clean up the event listeners set in the constructor if (!this._platform.IOS) { - this._enterListener(); - this._leaveListener(); + this._manualListeners.forEach((listener, event) => { + this._elementRef.nativeElement.removeEventListener(event, listener); + }); + + this._manualListeners.clear(); } this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message);