template context variable
When the compiler parses ng-template element contents it identifies let-tplVar="ctxValue" tokens and creates a binding:
[variable that can be used inside the template] = "context variable"
[tplVar] = "ctxValue"
Context template variable can be used anywhere inside the template. So for ngFor:
<div *ngFor="let hero of heroes">{{hero.name}}</div>
the hero variable will be available inside the ng-template:
<ng-template ngFor [ngForOf]="heroes" let-hero="$implicit">
<div>{{hero.name}}</div>
template variable
When compiler parses component template it creates binding for template variables and they can be accessed anywhere inside the template of the component:
<input #heroInput>
<span>{{heroInput.value}}</span>
You can also use template binding inside the ngFor:
<input #heroInput>
<div *ngFor="let hero of heroes">{{hero.name}} and {{heroInput.value}}</div>
Even though it is not provided in the template context by ngFor the compiler generates the following updateRenderer function:
function(_ck,_v) {
var currVal_0 = _v.context.$implicit.name; <---- read from context
var currVal_1 = jit_nodeValue4(_v.parent,4).value; <---- read from template variable
_ck(_v,1,0,currVal_0,currVal_1);
});
