anchor.diff:      code-tabs
         code-pane(language="javascript" name="TypeScript" format="linenums").
           //Typescript
  -        constructor() {
  -          this.myName = "Alice";
  -          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  +        class DisplayComponent {
  +          myName: string;
  +          <span class='otl'>names: Array<string>;</span>
  +
  +          constructor() {
  +            this.myName = "Alice";
  +            <span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
  +          }
           }
   
         code-pane(language="javascript" name="Javascript (ES5)" format="linenums").
           //ES5
           function DisplayComponent() {
             this.myName = "Alice";
  -          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  +          <span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
           }
       p.
           You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
  
positive.code:     p Using this syntax, you can build UI lists from any iterable object.
  .l-main-section
      h2#Create-a-class Create a class for the array property and inject into component
      p.
          Before we get too much further, we should mention that putting our model (array) directly in our controller isn't
          proper form.  We should separate the concerns by having another class serve the role of model and inject it into
          the controller.
      p Make a <code>FriendsService</code> class to provide the model with the list of friends.
  
      code-example(language="javascript" format="linenums").
        class FriendsService {
          names: Array&lt;string&gt;;
          constructor() {
            this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
          }
        }
      p.
          Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
          names in DisplayComponent to the names provided by the service you passed in.
  
      code-example(language="javascript" format="linenums").
        class DisplayComponent {
          names: Array&lt;string&gt;;
          constructor(friendsService: FriendsService) {
            this.names = friendsService.names;
          }
        }
  
      p And then make FriendsService available to dependency injection
      code-example(language="javascript" format="linenums").
        @Component({
          ...
          injectables: [FriendsService]
        })
        ...
        class DisplayComponent {...
      .callout.is-helpful
          header ES5 Note
          p.
  
negative.code:     code-tabs
        code-pane(language="javascript" name="TypeScript" format="linenums").
          //Typescript
          import {Component, View, bootstrap, For} from 'angular2/angular2';
          @View({
            ...
            directives: [For]
          })
  
  
        code-pane(language="javascript" name="ES5" format="linenums").
          //ES5
          DisplayComponent.annotations = [
            ...
            new angular.ViewAnnotation({
              ...
              directives: [angular.For]
            })
          ];
  
      p Reload and you've got your list of friends!
      p.
  