diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/style_bindings/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/style_bindings/TEST_CASES.json
index 1fd13b0cffc..22ac1bb247c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/style_bindings/TEST_CASES.json
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/style_bindings/TEST_CASES.json
@@ -52,8 +52,7 @@
           "failureMessage": "Incorrect template",
           "files": ["style_binding_suffixed.js"]
         }
-      ],
-      "skipForTemplatePipeline": true
+      ]
     },
     {
       "description": "should not create instructions for empty style bindings",
diff --git a/packages/compiler/src/template/pipeline/ir/src/ops/update.ts b/packages/compiler/src/template/pipeline/ir/src/ops/update.ts
index 6b8681c12b5..75d5d3e680f 100644
--- a/packages/compiler/src/template/pipeline/ir/src/ops/update.ts
+++ b/packages/compiler/src/template/pipeline/ir/src/ops/update.ts
@@ -131,16 +131,22 @@ export interface StylePropOp extends Op<UpdateOp>, ConsumesVarsTrait, DependsOnS
    * Expression which is bound to the property.
    */
   expression: o.Expression;
+
+  /**
+   * The unit of the expression value.
+   */
+  unit: string|null;
 }
 
 /** Create a `StylePropOp`. */
 export function createStylePropOp(
-    xref: XrefId, name: string, expression: o.Expression): StylePropOp {
+    xref: XrefId, name: string, expression: o.Expression, unit: string|null): StylePropOp {
   return {
     kind: OpKind.StyleProp,
     target: xref,
     name,
     expression,
+    unit,
     ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
     ...TRAIT_CONSUMES_VARS,
     ...NEW_OP,
diff --git a/packages/compiler/src/template/pipeline/src/ingest.ts b/packages/compiler/src/template/pipeline/src/ingest.ts
index 81aa2290e0b..a32cfd38330 100644
--- a/packages/compiler/src/template/pipeline/src/ingest.ts
+++ b/packages/compiler/src/template/pipeline/src/ingest.ts
@@ -252,7 +252,7 @@ function ingestBindings(
 function ingestPropertyBinding(
     view: ViewCompilation, xref: ir.XrefId,
     bindingKind: ir.ElementAttributeKind.Binding|ir.ElementAttributeKind.Template,
-    {name, value, type}: t.BoundAttribute): void {
+    {name, value, type, unit}: t.BoundAttribute): void {
   if (value instanceof e.ASTWithSource) {
     value = value.ast;
   }
@@ -286,7 +286,7 @@ function ingestPropertyBinding(
         if (bindingKind !== ir.ElementAttributeKind.Binding) {
           throw Error('Unexpected style binding on ng-template');
         }
-        view.update.push(ir.createStylePropOp(xref, name, convertAst(value, view.tpl)));
+        view.update.push(ir.createStylePropOp(xref, name, convertAst(value, view.tpl), unit));
         break;
       default:
         // TODO: implement remaining binding types.
diff --git a/packages/compiler/src/template/pipeline/src/instruction.ts b/packages/compiler/src/template/pipeline/src/instruction.ts
index 48baa035b90..bffea65e09c 100644
--- a/packages/compiler/src/template/pipeline/src/instruction.ts
+++ b/packages/compiler/src/template/pipeline/src/instruction.ts
@@ -140,11 +140,12 @@ export function property(name: string, expression: o.Expression): ir.UpdateOp {
   ]);
 }
 
-export function styleProp(name: string, expression: o.Expression): ir.UpdateOp {
-  return call(Identifiers.styleProp, [
-    o.literal(name),
-    expression,
-  ]);
+export function styleProp(name: string, expression: o.Expression, unit: string|null): ir.UpdateOp {
+  const args = [o.literal(name), expression];
+  if (unit !== null) {
+    args.push(o.literal(unit));
+  }
+  return call(Identifiers.styleProp, args);
 }
 
 export function styleMap(expression: o.Expression): ir.UpdateOp {
diff --git a/packages/compiler/src/template/pipeline/src/phases/reify.ts b/packages/compiler/src/template/pipeline/src/phases/reify.ts
index 295c742633e..1fe16acf2c1 100644
--- a/packages/compiler/src/template/pipeline/src/phases/reify.ts
+++ b/packages/compiler/src/template/pipeline/src/phases/reify.ts
@@ -122,7 +122,7 @@ function reifyUpdateOperations(_view: ViewCompilation, ops: ir.OpList<ir.UpdateO
         ir.OpList.replace(op, ng.property(op.name, op.expression));
         break;
       case ir.OpKind.StyleProp:
-        ir.OpList.replace(op, ng.styleProp(op.name, op.expression));
+        ir.OpList.replace(op, ng.styleProp(op.name, op.expression, op.unit));
         break;
       case ir.OpKind.StyleMap:
         ir.OpList.replace(op, ng.styleMap(op.expression));