Menu
The let keyword declares a template input variable that you can reference within the template. The input variables in this example are hero , i , and odd .
The asterisk is "syntactic sugar". It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk version with a more verbose form. The next two ngIf examples are effectively the same and we may write in either style: <!-- Examples (A) and (B) are the same --> <!-- (
You can define local variables on ng-template through let-name. When angular creates a template by calling createEmbeddedView it can also pass context that will be used inside ng-template. Using the key $implicit in the context object will set its value as default.
In Angular, a template is a chunk of HTML. Use special syntax within a template to build on many of Angular's features.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With