title: Angular2: How is ngfor expanded
body: <p>I know the textbook rules on that <code>&lt;div *ngFor="let foo of foobars"&gt;{{foo.stuff}}&lt;/div&gt;</code> turns into <code>&lt;template ngFor let-foo="$implicit" [ngForOf]="foobars"&gt;&lt;div&gt;...&lt;/div&gt;&lt;/template&gt;</code>. My question is two-fold:</p>
  
  <ul>
  <li><strong>HOW?</strong></li>
  <li>What do I need to do to leverage this mechanism ("microsyntax") myself?</li>
  </ul>
  
  <p>Ie turn <code>&lt;div *myDirective="item"&gt;{{item.stuff}}&lt;/div&gt;</code> into <code>&lt;template myDirective let-item="$implicit"&gt;&lt;div&gt;{{item.stuff}}&lt;/div&gt;&lt;/template&gt;</code>? </p>
  
  <p>Since I read ngFor's source code top to bottom, I can only assume this dark magic is in the compiler somewhere, I've been up and down the angular github, but I can't put my finger on it. <em>Help!</em> </p>