anchor.diff:      code-tabs
         code-pane(language="javascript" name="TypeScript" format="linenums").
           //TypeScript
  -        import {Component, View, bootstrap, For, If} from 'angular2/angular2';
  +        import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2';
           ...
           @View({
             <span class='otl'>template</span>: `
               &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
               &lt;p&gt;Friends:&lt;/p&gt;
               &lt;ul&gt;
  -              &lt;li *for=&quot;#name of names&quot;&gt;
  +              &lt;li *ng-for=&quot;#name of names&quot;&gt;
                   {{ name }}
                 &lt;/li&gt;
               &lt;/ul&gt;
  -            &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
  +            &lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
             `,
  -          directives: [For, If]
  +          directives: [NgFor, NgIf]
           })
           class DisplayComponent {
             ...
  
positive.code:           ...
            new angular.ViewAnnotation({
              ...
              directives: [angular.For]
            })
          ];
  
  
negative.code:     p Let's look at the few lines that do the work again:
      code-example(language="html" format="linenums").
        //HTML
        &lt;li *ng-for=&quot;#name of names&quot;&gt;
           {{ name }}
        &lt;/li&gt;
      p The way to read this is:
      ul
          li.
              <code>*ng-for</code> : create a DOM element for each item in an
              <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
               like an array
          li <code>#name</code> : refer to individual values of the iterable as 'name'
  