fix(ivy): add bound proerties name to template (#25272)

Before this change bound properties would not be used when matching directives
at runtime.

That is `<ng-template [ngIf]=cond>...</ng-template>` would not trigger the
`ngIf` directive.

PR Close #25272

packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
+import {setup} from '@angular/compiler/test/aot/test_util';
 import {compile, expectEmit} from './mock_compile';
 
 describe('compiler compliance: template', () => {
@@ -53,7 +53,7 @@ describe('compiler compliance: template', () => {
     const template = `
       const $c0$ = ["ngFor","","ngForOf",""];
       function MyComponent_ul_li_div_Template_1(rf, ctx) {
-        
+
         if (rf & 1) {
           const $s$ = $i0$.ɵgV();
           $i0$.ɵE(0, "div");
@@ -68,7 +68,7 @@ describe('compiler compliance: template', () => {
           $i0$.ɵT(1);
           $i0$.ɵe();
         }
-        
+
         if (rf & 2) {
           const $inner1$ = ctx.$implicit;
           const $middle1$ = $i0$.ɵx().$implicit;
@@ -78,7 +78,7 @@ describe('compiler compliance: template', () => {
           $i0$.ɵt(1, $i0$.ɵi1(" ", $myComp1$.format($outer1$, $middle1$, $inner1$, $myComp1$.component), " "));
         }
       }
-            
+
       function MyComponent_ul_li_Template_1(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "li");
@@ -90,7 +90,7 @@ describe('compiler compliance: template', () => {
           $i0$.ɵp(1, "ngForOf", $i0$.ɵb($myComp2$.items));
         }
       }
-      
+
       function MyComponent_ul_Template_0(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "ul");
@@ -140,8 +140,8 @@ describe('compiler compliance: template', () => {
     };
 
     const template = `
-      const $c0$ = ["ngFor","","ngForOf",""];
+      const $c0$ = ["ngFor", "", "ngForOf", ""];
-      
+
       function MyComponent_span_Template_0(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "span");
@@ -194,9 +194,9 @@ describe('compiler compliance: template', () => {
     };
 
     const template = `
-      const $c0$ = ["ngFor","","ngForOf",""];
+      const $c0$ = ["ngFor", "", "ngForOf", ""];
-      const $c1$ = ["ngIf",""];
+      const $c1$ = ["ngIf", ""];
-      
+
       function MyComponent_div_span_Template_1(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "span");
@@ -210,7 +210,7 @@ describe('compiler compliance: template', () => {
           $i0$.ɵt(1, $i0$.ɵi2(" ", $i$, " - ", $item$, " "));
         }
       }
-      
+
       function MyComponent_div_Template_0(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "div");
@@ -222,7 +222,7 @@ describe('compiler compliance: template', () => {
           $i0$.ɵp(1, "ngIf", $i0$.ɵb($app$.showing));
         }
       }
-      
+
       // ...
       template:function MyComponent_Template(rf, ctx){
         if (rf & 1) {
@@ -266,7 +266,7 @@ describe('compiler compliance: template', () => {
 
     // The template should look like this (where IDENT is a wild card for an identifier):
     const template = `
-      const $c0$ = ["ngFor","","ngForOf",""];
+      const $c0$ = ["ngFor", "", "ngForOf", ""];
       function MyComponent_div_div_div_Template_1(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "div");
@@ -279,7 +279,7 @@ describe('compiler compliance: template', () => {
           $i0$.ɵt(1, $i0$.ɵi2(" ", $middle$.value, " - ", $myComp$.name, " "));
         }
       }
-            
+
       function MyComponent_div_div_Template_1(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "div");
@@ -291,7 +291,7 @@ describe('compiler compliance: template', () => {
           $i0$.ɵp(1, "ngForOf", $i0$.ɵb($middle$.items));
         }
       }
-      
+
       function MyComponent_div_Template_0(rf, ctx) {
         if (rf & 1) {
           $i0$.ɵE(0, "div");
@@ -318,4 +318,50 @@ describe('compiler compliance: template', () => {
     expectEmit(result.source, template, 'Incorrect template');
   });
 
+  it('should support <ng-template>', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              import {Component, NgModule} from '@angular/core';
+              import {CommonModule} from '@angular/common';
+
+              @Component({
+                selector: 'my-component',
+                template: \`
+                  <ng-template [boundAttr]="b" attr="l">
+                    some-content
+                  </ng-template>\`
+              })
+              export class MyComponent {}
+
+              @NgModule({declarations: [MyComponent], imports: [CommonModule]})
+              export class MyModule {}
+          `
+      }
+    };
+
+    const template = `
+      const $c0$ = ["attr", "", "boundAttr", ""];
+
+      function Template_0(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵT(0, " some-content ");
+        }
+      }
+
+      // ...
+
+      template: function MyComponent_Template(rf, ctx) {
+        if (rf & 1) {
+          $i0$.ɵC(0, Template_0, null, $c0$);
+        }
+        if (rf & 2) {
+          $i0$.ɵp(0, "boundAttr", $i0$.ɵb(ctx.b));
+        }
+      }`;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
 });

packages/compiler/src/render3/view/template.ts

@@ -7,7 +7,6 @@
  */
 
 import {flatten, sanitizeIdentifier} from '../../compile_metadata';
-import {CompileReflector} from '../../compile_reflector';
 import {BindingForm, BuiltinFunctionCall, LocalResolver, convertActionBinding, convertPropertyBinding} from '../../compiler_util/expression_converter';
 import {ConstantPool} from '../../constant_pool';
 import * as core from '../../core';
@@ -24,14 +23,14 @@ import {ParseError, ParseSourceSpan} from '../../parse_util';
 import {DomElementSchemaRegistry} from '../../schema/dom_element_schema_registry';
 import {CssSelector, SelectorMatcher} from '../../selector';
 import {BindingParser} from '../../template_parser/binding_parser';
-import {OutputContext, error} from '../../util';
+import {error} from '../../util';
 import * as t from '../r3_ast';
 import {Identifiers as R3} from '../r3_identifiers';
 import {htmlAstToRender3Ast} from '../r3_template_transform';
 
 import {R3QueryMetadata} from './api';
 import {parseStyle} from './styling';
-import {CONTEXT_NAME, I18N_ATTR, I18N_ATTR_PREFIX, ID_SEPARATOR, IMPLICIT_REFERENCE, MEANING_SEPARATOR, REFERENCE_PREFIX, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, getQueryPredicate, invalid, mapToExpression, noop, temporaryAllocator, trimTrailingNulls, unsupported} from './util';
+import {CONTEXT_NAME, I18N_ATTR, I18N_ATTR_PREFIX, ID_SEPARATOR, IMPLICIT_REFERENCE, MEANING_SEPARATOR, REFERENCE_PREFIX, RENDER_FLAGS, asLiteral, invalid, mapToExpression, trimTrailingNulls, unsupported} from './util';
 
 function mapBindingToInstruction(type: BindingType): o.ExternalReference|undefined {
   switch (type) {
@@ -699,6 +698,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
       o.TYPED_NULL_EXPR,
     ];
 
+    // Match directives on both attributes and bound properties
     const attributeNames: o.Expression[] = [];
     const attributeMap: {[name: string]: string} = {};
 
@@ -707,7 +707,11 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
       attributeMap[a.name] = a.value;
     });
 
-    // Match directives on template attributes
+    template.inputs.forEach(i => {
+      attributeNames.push(asLiteral(i.name), asLiteral(''));
+      attributeMap[i.name] = '';
+    });
+
     if (this.directiveMatcher) {
       const selector = createCssSelector('ng-template', attributeMap);
       this.directiveMatcher.match(