anchor.diff:            angular.bootstrap(DisplayComponent);
           });
   .l-main-section
  -    h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
  -    p.
  -        Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>If</code>.  The
  -        <code>If</code> directive adds or removes elements from the DOM based on the expression you provide.
  +    h2#Conditionally-displaying-data-with-NgIf Conditionally displaying data with NgIf
  +    p.
  +        Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>NgIf</code>.  The
  +        <code>NgIf</code> directive adds or removes elements from the DOM based on the expression you provide.
       p See it in action by adding a paragraph at the end of your template
       pre.prettyprint.lang-html
           code.
  -            &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
  -    p You'll also need to add the <code>If</code> directive so Angular knows to include it.
  +            &lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
  +    p You'll also need to add the <code>NgIf</code> directive so Angular knows to include it.
   
       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';
           ...
  -          directives: [For, If]
  -      code-pane(language="javascript" name="ES5" format="linenums").
  -        //ES5
  -        directives: [angular.For, angular.If]
  +          directives: [NgFor, NgIf]
  +      code-pane(language="javascript" name="ES5" format="linenums").
  +        //ES5
  +        directives: [angular.NgFor, angular.NgIf]
       p.
           As there are currently 6 items in the list, you'll see the message congratulating you on your many friends.
           Remove three items from the list, reload your browser, and see that the message no longer displays.
  
positive.code:         want to move them to a separate file and load them with <code>templateUrl:</code> instead.
  
  .l-main-section
      h2#Create-an-array Create an array property and use For on the view
      p Moving up from a single property, create an array to display as a list.
  
      code-tabs
  
negative.code:           &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
            &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
            &#39;&lt;ul&gt;&#39; +
            &#39;&lt;li *ng-for=&quot;#name of names&quot;&gt;&#39; +
            &#39;{{ name }}&#39; +
            &#39;&lt;/li&gt;&#39; +
            &#39;&lt;/ul&gt;&#39;,
  
      p.
          To make this work, you'll also need to add the <code>NgFor</code> directive used by the template so
          that Angular knows to include it:
  
      code-tabs
        code-pane(language="javascript" name="TypeScript" format="linenums").
          //Typescript
          import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
          @View({
            ...
            directives: [NgFor]
          })
  
  
  