anchor.diff:      While the statement does nothing useful, 
       it satisfies Angular's requirement so that Angular will update the screen.
   :marked
  +  `$event` 객체를 사용하는 것보다 템플릿 참조 변수를 사용하여 입력 상자에
  +  도달하는 것이 더 쉽습니다. 다음은 템플릿 참조 변수를 사용하여
  +  사용자의 입력을 받도록 앞의 `keyup` 예제를 다시 작성한 것입니다.
  +
     It's easier to get to the input box with the template reference
     variable than to go through the `$event` object. Here's a rewrite of the previous
     `keyup` example that uses a template reference variable to get the user's input.
   +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-2' ,'app/keyup.components.ts (v2)')(format=".")
   :marked
  +  이 접근방법의 장점은 컴포넌트가 뷰에서 깨끗한 데이터를 얻는다는 것입니다.
  +  더 이상 `$event`와 그 구조에 대한 지식이 필요하지 않습니다.
  +
     A nice aspect of this approach is that the component gets clean data values from the view.
     It no longer requires knowledge of the `$event` and its structure.
   
   <a id="key-event"></a>
   .l-main-section
   :marked
  +  ## 키 이벤트 필터링 (`key.enter` 사용)
     ## Key event filtering (with `key.enter`)
  +
  +  `(keyup)` 이벤트 핸들러는 *모든 키입력*을 듣습니다.
  +  가끔은 오직 _Enter_ 키만 중요합니다, 왜냐하면 사용자가 입력을
  +  끝냈다는 신호이기 때문입니다.
  +  소음을 줄이는 한 가지 방법은 모든 `$event.keyCode`를 검사하고
  +  키가 _Enter_인 경우만 처리하는 것입니다.
  +
     The `(keyup)` event handler hears *every keystroke*.
     Sometimes only the _Enter_ key matters, because it signals that the user has finished typing.
     One way to reduce the noise would be to examine every `$event.keyCode` and take action only when the key is _Enter_.
     
  +  더 쉬운 방법도 있습니다: Angular의 `keyup.enter`라는 가상 이벤트(pseudo-event)에 바인딩하는 것입니다.
  +
     There's an easier way: bind to Angular's `keyup.enter` pseudo-event. 
     Then Angular calls the event handler only when the user presses _Enter_.
   +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-3' ,'app/keyup.components.ts (v3)')(format=".")
   
   :marked
  +  다음처럼 작동합니다.
  +
     Here's how it works.
   figure.image-display
       img(src='/resources/images/devguide/user-input/keyup3-anim.gif' alt="key up 3")
   
   .l-main-section
   :marked
  +  ## blur 처리
     ## On blur
  +
  +  앞의 예제에서, 사용자가 _Enter_를 누르지 않고
  +  마우스를 이동하여 페이지의 다른 곳을 클릭하면 
  +  입력 상자의 현재 상태를 잃게 됩니다.
   
     In the previous example, the current state of the input box
     is lost if the user mouses away and clicks elsewhere on the page
     without first pressing _Enter_.
     The component's `value` property is updated only when the user presses _Enter_.
   
  +  이 문제를 해결하기 위해, _Enter_ 키와 _blur_ 이벤트를 모두 수신합니다.
  +
     To fix this issue, listen to both the _Enter_ key and the _blur_ event.
   
   +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-4' ,'app/keyup.components.ts (v4)')(format=".")
   
   .l-main-section
   :marked
  +  ## 모든 것을 종합
     ## Put it all together
  +
  +  이전 페이지에서는 [데이터 표시](./displaying-data.html)를 어떻게 하는 가를 보여줬습니다.
  +  이번 페이지에서는 이벤트 바인딩 기술을 설명했습니다.
  +
     The previous page showed how to [display data](./displaying-data.html).
     This page demonstrated event binding techniques.
  +
  +  이제, 히어로 목록을 표시하고 새로운 히어로를 목록에 추가할 수 있는
  +  소규모 앱에 모든 것을 종합합니다.
  +  사용자는 입력 상자에 히어로의 이름을 입력하고
  +  **Add**를 클릭하여 히어로를 추가할 수 있습니다.
   
     Now, put it all together in a micro-app
     that can display a list of heroes and add new heroes to the list.
  
positive.code: 
  +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-component', 'app/click-me.component.ts')(format=".")
  :marked
    When the user clicks the button, Angular calls the `onClickMe` method from `ClickMeComponent`.
  
  .l-main-section
  :marked
    ## Get user input from the $event object
    DOM events carry a payload of information that may be useful to the component.
    This section shows how to bind to the `keyup` event of an input box to get the user's input after each keystroke.
  
    The following code listens to the `keyup` event and passes the entire event payload (`$event`) to the component event handler.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-template', 'app/keyup.components.ts (template v.1)')(format=".")
  :marked
    When a user presses and releases a key, the `keyup` event occurs, and Angular provides a corresponding
    DOM event object in the `$event` variable which this code passes as a parameter to the component's `onKey()` method.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-class-no-type', 'app/keyup.components.ts (class v.1)')(format=".")
  :marked
    The properties of an `$event` object vary depending on the type of DOM event. For example,
    a mouse event includes different information than a input box editing event.
    
    All [standard DOM event objects](https://developer.mozilla.org/en-US/docs/Web/API/Event)
    have a `target` property, a reference to the element that raised the event.
    In this case, `target` refers to the [`<input>` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) and
    `event.target.value` returns the current contents of that element.
  
    After each call, the `onKey()` method appends the contents of the input box value to the list
    in the component's `values` property, followed by a  separator character (|).
    The [interpolation](./template-syntax.html#interpolation)
    displays the accumulating input box changes from the `values` property. 
  
    Suppose the user enters the letters "abc", and then backspaces to remove them one by one.
    Here's what the UI displays:
  
negative.code: 
  .l-main-section
  :marked
    ## 소스 코드
    ## Source code
  
    다음은 이 페이지에서 논의 된 모든 코드입니다.
  
    Following is all the code discussed in this page.
  +makeTabs(`
  