What Is Let-* in Angular 2 Templates?
I Came Across a Strange Assignment Syntax Inside an Angular 2 Template. {{Car[Col. Field]}} It Appears That Let-Col and Let-Car="Rowdata" Create Two New...
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:
What is this magical let-* syntax called?
How does it work?
What is the difference between let-something and let-something="something else"?
2 Answers
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.
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
