Service inject example is not correct for TypeScript

[HenriqueLimas]

At https://angular.io/docs/js/latest/guide/displaying-data.html#Create-a-class, there is the example for inject the Service in the components.

ES5 example is:

//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.Component({
    selector: "display",
    injectables: [FriendsService]
  }),
  new angular.View({
    template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>',
    directives: [angular.For, angular.If]
  })
];
DisplayComponent.parameters = [[FriendsService]];
document.addEventListener("DOMContentLoaded", function() {
  angular.bootstrap(DisplayComponent);
});

But TypeScript example is:

//TypeScript
import {Component, View, bootstrap, For} from
...
  directives: [For]

I think TypeScript example should be:

import {Component, View, bootstrap, For, If} from 'angular2/angular2';

class FriendsService {
  constructor() {
    this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];      
  }
}

@Component({
  selector: 'display',
  injectables: [FriendsService]
})

@View({
  template: `
  <p>My name: {{ myName }}</p>
      <p>Friends:</p>
      <ul>
        <li *for="#name of names">
          {{ name }}
        </li>
      </ul>
      <p *if="names.length > 3">You have many friends!
   </p>`,
  directives: [For, If]
})

class DisplayComponent {
  myName: string;
  name: Array;

  constructor(friends:FriendsService) {
      this.myName = "Alice";
      this.names = friends.names;
  }
}

bootstrap(DisplayComponent);

[HenriqueLimas]

The Commit bdf28bc resolved that.
Pull request #91

[kwalrath]

Thanks for following up on this issue.

[HenriqueLimas]

👍

[hestad]

In the Typescript-version (bdf28bc), you changed the injectables: [FriendsService] to injectables: [DisplayComponent]. Is that right? Seems like a mismatch vs. the ES5 code.

[HenriqueLimas]

The commit was made by @rkirov. But it seems that the DisplayComponent in Typescript doesn't have the myName property.