diff --git a/packages/common/src/directives/ng_class.ts b/packages/common/src/directives/ng_class.ts index 73ec957113..9acc430fde 100644 --- a/packages/common/src/directives/ng_class.ts +++ b/packages/common/src/directives/ng_class.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, DoCheck, ElementRef, Input, IterableChanges, IterableDiffer, IterableDiffers, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer, ɵisListLikeIterable as isListLikeIterable, ɵstringify as stringify} from '@angular/core'; +import {Directive, DoCheck, ElementRef, Input, IterableChanges, IterableDiffer, IterableDiffers, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2, ɵisListLikeIterable as isListLikeIterable, ɵstringify as stringify} from '@angular/core'; /** * @ngModule CommonModule @@ -45,7 +45,7 @@ export class NgClass implements DoCheck { constructor( private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers, - private _ngEl: ElementRef, private _renderer: Renderer) {} + private _ngEl: ElementRef, private _renderer: Renderer2) {} @Input('class') set klass(v: string) { @@ -132,11 +132,16 @@ export class NgClass implements DoCheck { } } - private _toggleClass(klass: string, enabled: any): void { + private _toggleClass(klass: string, enabled: boolean): void { klass = klass.trim(); if (klass) { - klass.split(/\s+/g).forEach( - klass => { this._renderer.setElementClass(this._ngEl.nativeElement, klass, !!enabled); }); + klass.split(/\s+/g).forEach(klass => { + if (enabled) { + this._renderer.addClass(this._ngEl.nativeElement, klass); + } else { + this._renderer.removeClass(this._ngEl.nativeElement, klass); + } + }); } } } diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts index 524f482d9f..988cee4419 100644 --- a/packages/common/src/directives/ng_style.ts +++ b/packages/common/src/directives/ng_style.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer} from '@angular/core'; +import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer2} from '@angular/core'; /** * @ngModule CommonModule @@ -36,7 +36,7 @@ export class NgStyle implements DoCheck { private _differ: KeyValueDiffer; constructor( - private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer) {} + private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer2) {} @Input() set ngStyle(v: {[key: string]: string}) { @@ -65,6 +65,6 @@ export class NgStyle implements DoCheck { const [name, unit] = nameAndUnit.split('.'); value = value != null && unit ? `${value}${unit}` : value; - this._renderer.setElementStyle(this._ngEl.nativeElement, name, value as string); + this._renderer.setStyle(this._ngEl.nativeElement, name, value as string); } } diff --git a/tools/public_api_guard/common/common.d.ts b/tools/public_api_guard/common/common.d.ts index 1c206638fc..7efcf8de3d 100644 --- a/tools/public_api_guard/common/common.d.ts +++ b/tools/public_api_guard/common/common.d.ts @@ -138,7 +138,7 @@ export declare class NgClass implements DoCheck { ngClass: string | string[] | Set | { [klass: string]: any; }; - constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer); + constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2); ngDoCheck(): void; } @@ -223,7 +223,7 @@ export declare class NgStyle implements DoCheck { ngStyle: { [key: string]: string; }; - constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer); + constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2); ngDoCheck(): void; }