angular - template input and template reference variable in a template -

we create template input variable using let keyword while create template reference variable using #var var name of variable. can refer template reference variable anywhere in template.

what scope of template input variable? how differ scope of template reference variable? can me understand examples?

<div *ngfor="let hero of heroes">{{hero.name}}</div> <!--hero template input variable--> <input #heroinput> {{heroinput.value}} <!--heroinput template reference variable--> 

template context variable

when compiler parses ng-template element contents identifies let-tplvar="ctxvalue" tokens , creates binding:

[variable can used inside template] = "context variable" [tplvar]                                        = "ctxvalue" 

context template variable can used anywhere inside template. ngfor:

<div *ngfor="let hero of heroes">{{hero.name}}</div> 

the hero variable available inside ng-template:

<ng-template ngfor [ngforof]="heroes" let-hero="$implicit">   <div>{{hero.name}}</div> 

template variable

when compiler parses component template creates binding template variables , can accessed anywhere inside template of component:

<input #heroinput> <span>{{heroinput.value}}</span> 

you can use template binding inside ngfor:

<input #heroinput> <div *ngfor="let hero of heroes">{{hero.name}} , {{heroinput.value}}</div> 

even though not provided in template context ngfor compiler generates following updaterenderer function:

  function(_ck,_v) {       var currval_0 = _v.context.$implicit.name;         <---- read context       var currval_1 = jit_nodevalue4(_v.parent,4).value; <---- read template variable       _ck(_v,1,0,currval_0,currval_1);   });