refactor(common): remove usage of deprecated Renderer (angular#17528)

PR Close angular#17528
ng-model · Aug 21, 2017 · 55d151a · 55d151a
1 parent 5a1b9a3
commit 55d151a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git 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
@@ -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<string, string|number>;
 
   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
@@ -138,7 +138,7 @@ export declare class NgClass implements DoCheck {
     ngClass: string | string[] | Set<string> | {
         [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;
 }