anchor.diff:          DisplayComponent.annotations = [
             new angular.ComponentAnnotation({
               selector: "display",
  -            <span class='otl'>injectables: [FriendsService]</span>
  +            <span class='otl'>appInjector: [FriendsService]</span>
             }),
             new angular.ViewAnnotation({
               template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
  -            directives: [angular.For]
  +            directives: [angular.NgFor]
             })
           ];
           <span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
  
positive.code:           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.
      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.
  
      code-tabs
        code-pane(language="javascript" name="TypeScript" format="linenums").
          //Typescript
          import {Component, View, bootstrap, For, If} from 'angular2/angular2';
          ...
            directives: [For, If]
        code-pane(language="javascript" name="ES5" format="linenums").
          //ES5
          directives: [angular.For, angular.If]
      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.
  
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]
          })
  
  
  