anchor.diff:  :marked
     The `AppComponent`’s template should now look like this
   
  -+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (Template)')(format='.')
  ++makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (template)')(format='.')
   :marked
     Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
     The detail should update every time the user picks a new hero.
  
positive.code:   
    We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
  
  +makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero class)')(format=".")
  
  :marked
    We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files. 
    Add the following import statement near the top of both `app.component.ts` and `hero-detail.component.ts`.
  
  +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero class)')
  
  :marked
    #### The *hero* property is an ***input***
  
negative.code:   ### Keep the app transpiling and running
    We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
  
  code-example(language="bash").
    npm start
  
  :marked
  