I came across a strange assignment syntax inside an Angular 2 template.
<template let-col let-car="rowData" pTemplate="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
It appears that let-col and let-car="rowData" create two new variables col and car that can then be bound to inside the template.
Source: https://www.primefaces.org/primeng/#/datatable/templating
What is this magical let-* syntax called?
How does it work?
What is the difference between let-something and let-something="something else"?
update Angular 5
ngOutletContext was renamed to ngTemplateOutletContext
See also CHANGELOG.md @ angular/angular
original
Templates (<template>, or <ng-template> since 4.x) are added as embedded views and get passed a context.
With let-col the context property $implicit is made available as col within the template for bindings.
With let-foo="bar" the context property bar is made available as foo.
For example if you add a template
<ng-template #myTemplate let-col let-foo="bar">
<div>{{col}}</div>
<div>{{foo}}</div>
</ng-template>
<!-- render above template with a custom context -->
<ng-template [ngTemplateOutlet]="myTemplate"
[ngTemplateOutletContext]="{
$implicit: 'some col value',
bar: 'some bar value'
}"
></ng-template>
See also this answer and ViewContainerRef#createEmbeddedView.
*ngFor also works this way. The canonical syntax makes this more obvious
<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
<div>{{item}}</div>
</ng-template>
where NgFor adds the template as an embedded view to the DOM for each item of items and adds a few values (item, index, odd) to the context.
The Angular microsyntax lets you configure a directive in a compact, friendly string. The microsyntax parser translates that string into attributes on the <ng-template>. The let keyword declares a template input variable that you reference within the template.