fix(ivy): generate bind calls for property bindings (#23403)

PR Close #23403

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]}`);
       }

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: \`<div [id]="id"></div>\`
+              })
+              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: \`<div [class.error]="error" [style.background-color]="color"></div>\`
+              })
+              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', () => {

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), ' '));
               }
             }