app.ts

import {Component, bootstrap, FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/angular2';
import {HeroList} from './hero-list.component';
import {Hero} from './hero';

@Component({
  selector: 'my-app',
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, HeroList],
  template:`
    <h1>{{title}}</h1>

    <h2>My Heroes</h2>

    <div (click)="onSelect(heroes[2])">Click Me</div>

    <hero-list [heroes]="heroes" [hero]="selectedHero" (selected)="onSelect($event)" />

    <div *ng-if="selectedHero">
      <h2>{{selectedHero.name}} details!</h2>
      <div><label>id: </label>{{selectedHero.id}}</div>
      <div>
          <label>name: </label>
          <input [(ng-model)]="selectedHero.name" placeholder="name" />
      </div>
    </div>

    `
})
class AppComponent {
  public title = 'Tour of Heroes';
  public heroes = HEROES;
  public selectedHero: Hero;

  private onSelect(hero: Hero) {
    console.log('outside', hero);
    this.selectedHero = hero;
  }

  private set() {
    this.selectedHero = this.heroes[1];
  }
}

var HEROES: Hero[] = [
  { "id": 11, "name": "Mr. Nice" },
  { "id": 12, "name": "Narco" },
  { "id": 13, "name": "Bombasto" },
  { "id": 14, "name": "Celeritas" },
  { "id": 15, "name": "Magneta" },
  { "id": 16, "name": "RubberMan" },
  { "id": 17, "name": "Dynama" },
  { "id": 18, "name": "Dr IQ" },
  { "id": 19, "name": "Magma" },
  { "id": 20, "name": "Tornado" }
];

bootstrap(AppComponent);

hero-list-components.ts

import {Component, CORE_DIRECTIVES, EventEmitter} from 'angular2/angular2';
import {Hero} from './hero';

@Component({
  selector: 'hero-list',
  directives: [CORE_DIRECTIVES],
  properties: ['heroes', 'hero'],
  events: ['selected'],
  template: `
    <ul class="heroes">
      <li *ng-for="#hero of heroes" (click)="onSelect(hero)" [ng-class]="getSelectedClass(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
  `,
  styles:[`
  .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
  .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
  .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
  .heroes .badge {
    font-size: small;
    color: white;
    padding: 0.1em 0.7em;
    background-color: #369;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -1px;
  }
  .selected { background-color: #EEE; color: #369; }
  `]
})
export class HeroList {
  private selected = new EventEmitter();
  private heroes: Array<Hero>;
  private hero: Hero;

  private getSelectedClass(hero: Hero) {
    return {
      selected: hero === this.hero
    }
  };

  private onSelect(hero: Hero) {
    this.selected.next(hero);
  };
}