title: Angular 2 quick start tutorial issues (nested components)
body: <p>Hey everyone i'm learning Angular 2 following the quick start tutorial but i'm using a template I downloaded from thenewboston, because its configured to convert typescript to java script, in short my issue is when I try to nest the herodetailcomponent it wont even show on click of the list, nor will it result in any errors in chrome's console. Here are my files I know there are alot but Im not sure if im making an easily recognized mistake. </p>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "angular-2",
    "version": "1.0.0",
    "scripts": {
      "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "lite": "lite-server",
      "typings": "typings",
      "postinstall": "typings install"
    },
    "license": "ISC",
    "dependencies": {
      "angular2": "2.0.0-beta.21",
      "systemjs": "0.19.41",
      "es6-shim": "^0.35.0",
      "reflect-metadata": "0.1.9",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "0.7.4"
    },
    "devDependencies": {
      "concurrently": "^3.1.0",
      "lite-server": "^2.1.0",
      "typescript": "^2.1.4",
      "typings": "^2.1.0"
    }
  }
  </code></pre>
  
  <p>tsconfig.json:</p>
  
  <pre><code>  "compilerOptions": {
      "types" : []
      "target": "es5",
      "module": "system",
      "moduleResolution": "node",
      "outDir": "app/js",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    },
    "exclude": [
      "node_modules",
      "typings/main",
      "typings/main.d.ts"
    ]
  }
  </code></pre>
  
  <p>main.ts:</p>
  
  <pre><code>    /*import {bootstrap}    from 'angular/platform/browser';
  import {AppComponent} from './app.component';
  
  bootstrap(AppComponent);
   */
   import { platformBrowserDynamic } from '@angular2/platform-browser-dynamic';
  import { AppModule } from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  bootstrap(AppComponent);
  </code></pre>
  
  <p>hero.ts</p>
  
  <pre><code>    export class Hero {
    id: number;
    name: string;
  }
  </code></pre>
  
  <p>hero-detail.component.ts</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { Hero } from './hero';
  
  @Component({
    selector: 'my-hero-detail',
    template: `
    &lt;div *ngIf="hero"&gt;
      &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
      &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{hero.id}}&lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;name: &lt;/label&gt;
        &lt;input [(ngModel)]="hero.name" placeholder="name"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  `
  
  })
  export class HeroDetailComponent {
    @Input()
    hero:Hero;
  
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>    import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule }   from '@angular/forms';
  import { AppComponent }  from './app.component';
  import { HeroDetailComponent } from './hero-detail.component';
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule
    ],
    declarations: [
      AppComponent,
      HeroDetailComponent
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import {Component} from 'angular/core';
  import { Hero } from './hero';
  //import { HeroDetailComponent } from './hero-detail.component';
  
  
  
  const 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' }
  ];
  
  
  @Component({
      selector: 'my-app',
  //this is two way
  template:`
    &lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;h2&gt;My Heroes&lt;/h2&gt;
  &lt;ul class="heroes"&gt;
  &lt;li *ngFor= "let hero of heroes"   [class.selected]="hero === selectedHero" (click)="onSelect(hero)"&gt;
    &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
  &lt;/li&gt;
  
  &lt;/ul&gt;
   &lt;my-hero-detail [hero]="selectedHero"&gt;&lt;/my-hero-detail&gt;
  
  `,
    styles: [`
      ignore this
    `]
  
  }) 
  
  export class AppComponent {
  title = 'Tour of Heroes';
  heroes=HEROES;
  selectedHero: Hero;
  
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
  
  }
  </code></pre>