diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
index 7557727261..d42697b8ae 100644
--- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
@@ -383,6 +383,47 @@ describe('compiler compliance: styling', () => {
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
+
+ it('should support [style.foo.suffix] style bindings with a suffix', () => {
+
+ const files = {
+ app: {
+ 'spec.ts': `
+ import {Component, NgModule} from '@angular/core';
+
+ @Component({
+ selector: 'my-component',
+ template: \`
\`
+ })
+ export class MyComponent {
+ }
+
+ @NgModule({declarations: [MyComponent]})
+ export class MyModule {}
+ `
+ }
+ };
+
+ const template = `
+ const $e0_styles$= ["font-size"];
+ …
+ template: function MyComponent_Template(rf, ctx) {
+ if (rf & 1) {
+ $r3$.ɵelementStart(0, "div");
+ $r3$.ɵelementStyling(null, _c0);
+ $r3$.ɵelementEnd();
+ }
+ if (rf & 2) {
+ $r3$.ɵelementStyleProp(0, 0, 12, "px");
+ $r3$.ɵelementStylingApply(0);
+ }
+ }
+ `;
+
+ const result = compile(files, angularFiles);
+ expectEmit(result.source, template, 'Incorrect template');
+
+ });
});
describe('[class]', () => {
diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts
index 306a8c7d7f..d81a3681be 100644
--- a/packages/compiler/src/render3/view/template.ts
+++ b/packages/compiler/src/render3/view/template.ts
@@ -613,19 +613,18 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver
let i = mapBasedStyleInput ? 1 : 0;
for (i; i < styleInputs.length; i++) {
const input = styleInputs[i];
- const params: any[] = [];
- const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
- if (sanitizationRef) params.push(sanitizationRef);
-
const key = input.name;
const styleIndex: number = stylesIndexMap[key] !;
const value = input.value.visit(this._valueConverter);
- this.updateInstruction(input.sourceSpan, R3.elementStyleProp, () => {
- return [
- indexLiteral, o.literal(styleIndex),
- this.convertPropertyBinding(implicit, value, true), ...params
- ];
- });
+ const params: o.Expression[] = [
+ indexLiteral, o.literal(styleIndex), this.convertPropertyBinding(implicit, value, true)
+ ];
+
+ if (input.unit != null) {
+ params.push(o.literal(input.unit));
+ }
+
+ this.updateInstruction(input.sourceSpan, R3.elementStyleProp, params);
}
lastInputCommand = styleInputs[styleInputs.length - 1];
diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts
index eac261bedc..4d77046cfd 100644
--- a/packages/core/src/render3/instructions.ts
+++ b/packages/core/src/render3/instructions.ts
@@ -1687,8 +1687,6 @@ export function elementStylingApply(index: number): void {
* specifically for element styling--the index must be the next index after the element
* index.)
* @param styleIndex Index of the style property on this element. (Monotonically increasing.)
- * @param styleName Name of property. Because it is going to DOM this is not subject to
- * renaming as part of minification.
* @param value New value to write (null to remove).
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
* Note that when a suffix is provided then the underlying sanitizer will