Current semantics of #ref are not correct in context of templates. Consider this example:

<ul #parent>
  <template #child ngFor #item [ngForOf]='items'><li>{{item}}</li></template>
</ul>
<button (click)="log(parent)">works</button>
<button (click)="log(child)">breaks</button>

Here the parent can be accessed anywhere in the outer template but child can only be accessed in the inner template. This means that it is not possible to get a reference to the inner template.

The issue is that # is declaring a reference not an input. So the above example should be written in a way where references and inputs are declared in a clear way by changing the semantics of # to be consistent, and have a separate syntax template inputs.

Proposal

• #foo or ref-foo create a reference which is visible anywhere in the parent template.
• let-foo (no shorthand syntax) creates an input into a template which can only be used on a template.

<ul #parent>
  <template #child ngFor let-item [ngForOf]='items'><li>{{item}}</li></template>
</ul>
<button (click)="log(parent)">works</button>
<button (click)="log(child)">works</button>

Consequences

Template syntax will change to:

<ul>
  <template ngFor let-item [ngForOf]='items'><li>{{item}}</li></template>
</ul>

or

<ul>
  <li *ngFor="let item in items">{{item}}</li>
</ul>

and long form var-foo will change to ref-foo.

Deprecation

• temporarily support *ngFor="#item in items" with a console.warn to switch to the new *ngFor="let item in items" syntax.
• depreciation warning on using var-foo.