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