From 6b86df0d91599072d8f1fbd57f88f96a8cbb6cc7 Mon Sep 17 00:00:00 2001
From: Sendil Kumar N <sendilkumarn@live.com>
Date: Sat, 28 May 2016 02:32:01 +0800
Subject: [PATCH] fix(progress-bar): determinate state reflects value (#542)

Fixes #519
---
 src/components/progress-bar/progress-bar.html    |  4 ++--
 src/components/progress-bar/progress-bar.spec.ts | 14 +++++++-------
 src/components/progress-bar/progress-bar.ts      |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/progress-bar/progress-bar.html b/src/components/progress-bar/progress-bar.html
index 6bfa16cc1fa..282bbe0d8db 100644
--- a/src/components/progress-bar/progress-bar.html
+++ b/src/components/progress-bar/progress-bar.html
@@ -1,5 +1,5 @@
 <!-- The background div is named as such because it appears below the other divs and is not sized based on values. -->
 <div class="md-progress-bar-background"></div>
-<div class="md-progress-bar-buffer" [style.transform]="bufferTransform()"></div>
-<div class="md-progress-bar-primary md-progress-bar-fill" [style.transform]="primaryTransform()"></div>
+<div class="md-progress-bar-buffer" [ngStyle]="bufferTransform()"></div>
+<div class="md-progress-bar-primary md-progress-bar-fill" [ngStyle]="primaryTransform()"></div>
 <div class="md-progress-bar-secondary md-progress-bar-fill"></div>
diff --git a/src/components/progress-bar/progress-bar.spec.ts b/src/components/progress-bar/progress-bar.spec.ts
index 0db2bd2f3fc..a09ea42a36c 100644
--- a/src/components/progress-bar/progress-bar.spec.ts
+++ b/src/components/progress-bar/progress-bar.spec.ts
@@ -88,27 +88,27 @@ describe('MdProgressBar', () => {
         let progressElement = fixture.debugElement.query(By.css('md-progress-bar'));
         let progressComponent = progressElement.componentInstance;
 
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0)' });
         expect(progressComponent.bufferTransform()).toBe(undefined);
 
         progressComponent.value = 40;
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.4)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.4)' });
         expect(progressComponent.bufferTransform()).toBe(undefined);
 
         progressComponent.value = 35;
         progressComponent.bufferValue = 55;
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.35)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.35)' });
         expect(progressComponent.bufferTransform()).toBe(undefined);
 
         progressComponent.mode = 'buffer';
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.35)');
-        expect(progressComponent.bufferTransform()).toBe('scaleX(0.55)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.35)' });
+        expect(progressComponent.bufferTransform()).toEqual({ transform: 'scaleX(0.55)' });
 
 
         progressComponent.value = 60;
         progressComponent.bufferValue = 60;
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.6)');
-        expect(progressComponent.bufferTransform()).toBe('scaleX(0.6)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.6)' });
+        expect(progressComponent.bufferTransform()).toEqual({ transform: 'scaleX(0.6)' });
         done();
       });
   });
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 72061932010..89dc3314fe0 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -68,7 +68,7 @@ export class MdProgressBar {
    */
   primaryTransform() {
     let scale = this.value / 100;
-    return `scaleX(${scale})`;
+    return {transform: `scaleX(${scale})`};
   }
 
   /**
@@ -79,7 +79,7 @@ export class MdProgressBar {
   bufferTransform() {
     if (this.mode == 'buffer') {
       let scale = this.bufferValue / 100;
-      return `scaleX(${scale})`;
+      return {transform: `scaleX(${scale})`};
     }
   }
 }