What is let- in Angular 2 templates

Question

I came across a strange assignment syntax inside an Angular 2 template    lt template let-col let-car  rowData  pTemplate  body  gt       lt span  style color   car col field   gt   car col field    lt  span gt   lt  template gt    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

User · Answer

The Angular microsyntax lets you configure a directive in a compact  friendly string  The microsyntax parser translates that string into attributes on the  lt ng-template gt   The let keyword declares a template input variable that you reference within the template

User · Answer

update Angular 5  ngOutletContext was renamed to ngTemplateOutletContext  See also https   github com angular angular blob master CHANGELOG md 500-beta5-2017-08-29  original  Templates   lt template gt   or  lt ng-template gt  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   lt ng-template  myTemplate let-col let-foo  bar  gt     lt div gt   col   lt  div gt     lt div gt   foo   lt  div gt   lt  ng-template gt    lt  -- render above template with a custom context -- gt   lt ng-template  ngTemplateOutlet   myTemplate                ngTemplateOutletContext                                                 implicit   some col value                                              bar   some bar value                                              gt  lt  ng-template gt    See also this answer and ViewContainerRef createEmbeddedView    ngFor also works this way  The canonical syntax makes this more obvious   lt ng-template ngFor let-item  ngForOf   items  let-i  index  let-odd  odd  gt     lt div gt   item   lt  div gt   lt  ng-template gt    where NgFor adds the template as 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

[angular] What is let-* in Angular 2 templates?

Examples related to angular

Examples related to angular2-template

Examples related to primeng