What is let-* in Angular 2 templates?
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.