anchor.diff:      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
  +    code-tabs
  +      code-pane(language="javascript" name="TypeScript" format="linenums").
  +        class FriendsService {
  +          names: Array&lt;string&gt;;
  +          constructor() {
  +            this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  +          }
  +        }
  +
  +      code-pane(language="javascript" name="ES5" format="linenums").
  +        function FriendsService() {
  +          this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  +        }
  +    p.
  +        Now replace the current list of friends in DisplayComponent by including the FriendsService in the injectables list,
  +        then including the service in the constructor, and finally 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.
  
positive.code: 
      code-tabs
        code-pane(language="javascript" name="TypeScript" format="linenums").
          //TypeScript
          class FriendsService {
            names: Array&lt;string&gt;;
            constructor() {
              this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
            }
          }
          ...
          class DisplayComponent {
             names: Array&lt;string&gt;;
  
             constructor(friendsService: FriendsService) {
               this.names = friendsService.names;
             }
                }
        code-pane(language="javascript" name="ES5" format="linenums").
          //ES5
          function FriendsService() {
            this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
          }
          function DisplayComponent(friends) {
            this.myName = "Alice";
            this.names = friends.names;
          }
          DisplayComponent.annotations = [
            new angular.ComponentAnnotation({
              selector: "display",
              injectables: [FriendsService]
            }),
            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, angular.If]
            })
          ];
          DisplayComponent.parameters = [[FriendsService]];
          document.addEventListener("DOMContentLoaded", function() {
            angular.bootstrap(DisplayComponent);
          });
  
negative.code:     code-tabs
        code-pane(language="javascript" name="TypeScript" format="linenums").
          //Typescript
          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";
            <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
  