anchor.diff:        .file app.module.ts
         .file main.ts
       .file node_modules ...
  -    .file typings ...      
  +    .file typings ...
       .file index.html
       .file package.json
       .file styles.css
  
positive.code:     .file tsconfig.json
      .file typings.json
  :marked
    ### 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
    This will keep the application running while we continue to build the Tour of Heroes.
  
    ## Making a Hero Detail Component
    Our heroes list and our hero details are in the same component in the same file.
    They're small now but each could grow. 
    We are sure to receive new requirements for one and not the other.
    Yet every change puts both components at risk and doubles the testing burden without benefit.
    If we had to reuse the hero details elsewhere in our app,
    the heroes list would tag along for the ride. 
    
    Our current component violates the 
    [Single Responsibility Principle](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html).
    It's only a tutorial but we can still do things right &mdash; 
    especially if doing them right is easy and we learn how to build Angular apps in the process.
    
    Let’s break the hero details out into its own component.
  
    ### Separating the Hero Detail Component
    Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows.
  
  +makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'app/hero-detail.component.ts (initial version)')(format=".")
  .l-sub-section
    :marked
      ### Naming conventions
      We like to identify at a glance which classes are components and which files contain components. 
      
      Notice that  we have an `AppComponent` in a file named `app.component.ts` and our new
      `HeroDetailComponent` is in a file named `hero-detail.component.ts`. 
      
      All of our component names end in "Component".  All of our component file names end in ".component".
      
      We spell our file names in lower **[dash case](../guide/glossary.html#!#dash-case)** 
      (AKA **[kebab-case](../guide/glossary.html#!#kebab-case)**) so we don't worry about
      case sensitivity on the server or in source control.
  
      <!-- TODO
      .l-sub-section
        :marked
          Learn more about naming conventions in the chapter [Naming Conventions]
      :marked
      -->
  :marked
    We begin by importing the `Component` and `Input` decorators from Angular because we're going to need them soon.
      
    We create metadata with the `@Component` decorator where we 
    specify the selector name that identifies this component's element.
    Then we export the class to make it available to other components.
    
    When we finish here, we'll import it into `AppComponent` and create a corresponding `<my-hero-detail>`  element.
  :marked
    #### Hero Detail Template
    At the moment, the *Heroes* and *Hero Detail* views are combined in one template in `AppComponent`.
    Let’s **cut** the *Hero Detail* content from `AppComponent` and **paste** it into the new template property of  `HeroDetailComponent`.
  
    We previously bound to the `selectedHero.name` property of the `AppComponent`.
    Our `HeroDetailComponent` will have a `hero` property, not a `selectedHero` property.
  
negative.code: +makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'app/hero-detail.component.ts (template)')(format=".")
  
  :marked
    이제 히어로 상세 레이아웃은 `HeroDetailComponent`에만 존재합니다.
  
    Now our hero detail layout exists only in the `HeroDetailComponent`.
  
    #### *히어로* 프로퍼티 추가하기
    #### Add the *hero* property
  
    앞서 얘기한 `hero` 프로퍼티를 컴포넌트 클래스에 추가합니다.
  
    Let’s add that `hero` property we were talking about to the component class.
  +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero')
  :marked
    앗. `hero` 프로퍼티를 `Hero` 타입으로 선언했지만 `Hero` 클래스는 `app.component.ts` 파일에 있습니다.
    두개의 콤포넌트가 각각의 파일에 있으므로 `Hero` 클래스를 참조해야 합니다.
  
    Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app.component.ts` file.
    We have two components, each in their own file, that need to reference the `Hero` class.
  
    `app.component.ts` 에 있는 `Hero` 클래스를 `hero.ts`로 이전하여 문제를 해결하겠습니다.
  
    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', '', 'app/hero.ts')(format=".")
  
  :marked
    양쪽 컴포넌트 파일에서 참조를 해야 하므로 `hero.ts`의 `Hero` 클래스를 익스포트합니다.
    아래 임포트 구문을 **`app.component.ts`와 `hero-detail.component.ts`** 상단에 추가합니다.
  
    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')
  
  :marked
    #### *히어로*는 ***인풋*** 프로퍼티
    #### The *hero* property is an ***input***
  
    `HeroDetailComponent`에게 어떤 히어로를 보여줘야 할지 알려줘야 합니다. 누가 알려줄까요? 부모인 `AppComponent` 입니다!
  
    The `HeroDetailComponent` must be told what hero to display. Who will tell it? The parent `AppComponent`!
  
    `AppComponent`는 어떤 히어로를 보여줘야 할지 알고 있습니다. 바로 사용자가 목록에서 선택한 히어로 입니다.
    사용자의 선택은 `selectedHero` 프로퍼티에 저장되어 있습니다.
  
    The `AppComponent` knows which hero to show: the hero that the user selected from the list.
    The user's selection is in its `selectedHero` property.
  
    조만간 `AppComponent`를 업데이트하여 `selectedHero` 프로퍼티를 `HeroDetailComponent`의 `hero` 프로퍼티에 바인딩하겠습니다.
    바인딩은 *아마도* 이렇게 될 것입니다.
  
    We will soon update the `AppComponent` template so that it binds its `selectedHero` property
    to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
  code-example(format=".").
    &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
  :marked
    `hero` 속성이 프로퍼티 바인딩의 ***타겟*** 입니다. &mdash; (=) 의 왼쪽에 꺽쇠괄호로 둘러 쌓여 있는 것에 주의하세요.
  
    Notice that the `hero` property is the ***target*** of a property binding &mdash; it's in square brackets to the left of the (=).
  
    Angular는 ***타겟*** 프로퍼티를 ***인풋*** 프로퍼티로 선언할 것을 요구합니다.
    그렇게 하지 않으면 Angular는 바인딩을 거부하고 에러를 던질 것입니다.
  
    Angular insists that we declare a ***target*** property to be an ***input*** property.
    If we don't, Angular rejects the binding and throws an error.
  .l-sub-section
    :marked
      인풋 속성은 [여기](../guide/attribute-directives.html#why-input)에서 더 자세하게 알아보세요.
      이 링크에서 왜 *타겟* 프로퍼티는 특별한 처리가 필요한지 *소스* 프로퍼티는 그렇지 않은지 설명하고 있습니다.
  
      We explain input properties in more detail [here](../guide/attribute-directives.html#why-input)
      where we also explain why *target* properties require this special treatment and
      *source* properties do not.
  :marked
    `hero`를 *인풋*으로 선언하는 방법은 몇가지가 있습니다.
    가장 *선호*하는 방법으로 해보겠습니다. 앞서 임포트한 `@Input` 데코레이터를 `hero` 프로퍼티에 어노테이팅 하는 것입니다.
  
    There are a couple of ways we can declare that `hero` is an *input*.
    We'll do it the way we *prefer*, by annotating the `hero` property with the `@Input` decorator that we imported earlier.
  +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-input')(format='.')
  
  .l-sub-section
    :marked
      `@Input()` 데코레이터에 대해 
      [Attribute Directives](../guide/attribute-directives.html#input) 에서 더 자세하게 알아보세요.
  
      Learn more about the `@Input()` decorator in the
      [Attribute Directives](../guide/attribute-directives.html#input) chapter.
  
  .l-main-section
  :marked
    ## AppModule 갱신
    ## Refresh the AppModule
  
    애플리케이션의 root 모듈인 `AppModule`로 다시 돌아와서, `HeroDetailComponent`를 사용하도록 설정하겠습니다.
  
    We return to the `AppModule`, the application's root module, and teach it to use the `HeroDetailComponent`.
  
    `HeroDetailComponent`를 임포트하여 참조 가능하도록 합니다.
  
    We begin by importing the `HeroDetailComponent` so we can refer to it.
  
  +makeExample('toh-3/ts/app/app.module.ts', 'hero-detail-import')
  
  :marked
    다음으로 `NgModule` 데코레이터의 `declarations` 배열에 `HeroDetailComponent`를 추가합니다.
    이 배열에는 우리가 생성했거나 애플리케이션 모듈에 속한 모든 컴포넌트, 파이프, 지시자를 추가할 수 있습니다.
  
    Then we add `HeroDetailComponent` to the `NgModule` decorator's `declarations` array.
    This array contains the list of all components, pipes, and directives that we created
    and that belong in our application's module.
  