What is let-* in Angular 2 templates?
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"
?
Solution 1:
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.
See also Using $implict to pass multiple parameters
Solution 2:
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.