title: What is let-* in Angular 2 templates?
body: <p>I came across a strange assignment syntax inside an Angular 2 template.</p>
  
  <pre class="lang-ts prettyprint-override"><code>&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;
  </code></pre>
  
  <p>It appears that <code>let-col</code> and <code>let-car="rowData"</code> create two new variables <code>col</code> and <code>car</code> that can then be bound to inside the template.</p>
  
  <p>Source: <a href="https://www.primefaces.org/primeng/#/datatable/templating" rel="noreferrer">https://www.primefaces.org/primeng/#/datatable/templating</a></p>
  
  <p>What is this magical <code>let-*</code> syntax called? </p>
  
  <p>How does it work? </p>
  
  <p>What is the difference between <code>let-something</code> and <code>let-something="something else"</code>?</p>