diff --git a/packages/compiler/src/render3/r3_view_compiler.ts b/packages/compiler/src/render3/r3_view_compiler.ts index 587b4bb626..eb6f3bef3c 100644 --- a/packages/compiler/src/render3/r3_view_compiler.ts +++ b/packages/compiler/src/render3/r3_view_compiler.ts @@ -722,7 +722,7 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver { // TODO(chuckj): runtime: security context? this.instruction( this._bindingMode, input.sourceSpan, instruction, o.literal(elementIndex), - o.literal(input.name), convertedBinding); + o.literal(input.name), o.importExpr(R3.bind).callFn([convertedBinding])); } else { this.unsupported(`binding ${PropertyBindingType[input.type]}`); } diff --git a/packages/compiler/test/render3/r3_compiler_compliance_spec.ts b/packages/compiler/test/render3/r3_compiler_compliance_spec.ts index 2c38538185..b70388795d 100644 --- a/packages/compiler/test/render3/r3_compiler_compliance_spec.ts +++ b/packages/compiler/test/render3/r3_compiler_compliance_spec.ts @@ -65,6 +65,91 @@ describe('compiler compliance', () => { expectEmit(result.source, factory, 'Incorrect factory'); expectEmit(result.source, template, 'Incorrect template'); }); + + it('should bind to element properties', () => { + const files = { + app: { + 'spec.ts': ` + import {Component, NgModule} from '@angular/core'; + + @Component({ + selector: 'my-component', + template: \`
\` + }) + export class MyComponent { + id = 'one'; + } + + @NgModule({declarations: [MyComponent]}) + export class MyModule {} + ` + } + }; + + const factory = 'factory: function MyComponent_Factory() { return new MyComponent(); }'; + const template = ` + … + template: function MyComponent_Template(rf: IDENT, ctx: IDENT) { + if (rf & 1) { + $r3$.ɵE(0, 'div'); + $r3$.ɵe(); + } + if (rf & 2) { + $r3$.ɵp(0, 'id', $r3$.ɵb(ctx.id)); + } + } + `; + + + const result = compile(files, angularFiles); + + expectEmit(result.source, factory, 'Incorrect factory'); + expectEmit(result.source, template, 'Incorrect template'); + }); + + it('should bind to class and style names', () => { + const files = { + app: { + 'spec.ts': ` + import {Component, NgModule} from '@angular/core'; + + @Component({ + selector: 'my-component', + template: \`
\` + }) + export class MyComponent { + error = true; + color = 'red'; + } + + @NgModule({declarations: [MyComponent]}) + export class MyModule {} + ` + } + }; + + const factory = 'factory: function MyComponent_Factory() { return new MyComponent(); }'; + const template = ` + … + template: function MyComponent_Template(rf: IDENT, ctx: IDENT) { + if (rf & 1) { + $r3$.ɵE(0, 'div'); + $r3$.ɵe(); + } + if (rf & 2) { + $r3$.ɵkn(0, 'error', $r3$.ɵb(ctx.error)); + $r3$.ɵsn(0, 'background-color', $r3$.ɵb(ctx.color)); + } + } + `; + + + const result = compile(files, angularFiles); + + expectEmit(result.source, factory, 'Incorrect factory'); + expectEmit(result.source, template, 'Incorrect template'); + }); + }); describe('components & directives', () => { diff --git a/packages/compiler/test/render3/r3_view_compiler_template_spec.ts b/packages/compiler/test/render3/r3_view_compiler_template_spec.ts index fbbb7555c5..bd09e7ef27 100644 --- a/packages/compiler/test/render3/r3_view_compiler_template_spec.ts +++ b/packages/compiler/test/render3/r3_view_compiler_template_spec.ts @@ -16,7 +16,7 @@ describe('compiler compliance: template', () => { compileCommon: true, }); - it('should create correctly bind to context in nested template', () => { + it('should correctly bind to context in nested template', () => { const files = { app: { 'spec.ts': ` @@ -94,7 +94,7 @@ describe('compiler compliance: template', () => { const $outer$ = ctx0.$implicit; const $middle$ = ctx1.$implicit; const $inner$ = ctx2.$implicit; - $i0$.ɵp(0, 'title', ctx.format($outer$, $middle$, $inner$, ctx.component)); + $i0$.ɵp(0, 'title', $i0$.ɵb(ctx.format($outer$, $middle$, $inner$, ctx.component))); $i0$.ɵt(1, $i0$.ɵi1(' ', ctx.format($outer$, $middle$, $inner$, ctx.component), ' ')); } }