The backticks around the component template let you put the

,

, and

elements on their own lines, thanks to the template literals feature in ES2015 and TypeScript. For more information, see Template literals.

component 템플릿 주변의 backtick들은

,

, 그리고

요소들을 각각 그들의 라인에 있을 수 있도록 한다. 자세한 정보는 템플릿 리터럴을 참고하자.

app.component.ts (AppComponent's template)

template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

---

Edit the hero name

영웅의 이름 수정하기

Users should be able to edit the hero name in an textbox. The textbox should both display the hero's name property and update that property as the user types.

사용자들은 텍스트 상자에 영웅의 이름을 수정할 수 있어야 한다. 텍스트상자는 영웅의 이름속성을 보여주기도 하고 사용자가 수정할때 업데이트되어야한다.

You need a two-way binding between the form element and the hero.name property.

여러분은 폼 요소와 hero.name속성의 두가지 바인딩이 필요하다.

Two-way binding

두가지 바인딩

Refactor the hero name in the template so it looks like this:

템플릿의 영웅의 이름을 다음과 같이 보이도록 리팩토링하자:

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

[(ngModel)] is the Angular syntax to bind the hero.name property to the textbox. Data flow in both directions: from the property to the textbox; and from the textbox back to the property.

[(ngModel)]은 hero.name속성을 텍스트상자에 묶기 위한 Angular의 문법이다. 데이터는 양방향으로 전달됩니다: 속성에서 텍스트상자로, 그리고 텍스트상자에서 속성으로

Unfortunately, immediately after this change, the application breaks. If you looked in the browser console, you'd see Angular complaining that "ngModel ... isn't a known property of input."

안타깝게도, 이 변화 이후로 앱이 깨진다. 만약 여러분이 브라우저 콘솔을 보게되면, Angular가 “ngModel은 input의 속성이 아닙니다”라고 하는걸 볼 수 있다.

Although NgModel is a valid Angular directive, it isn't available by default. It belongs to the optional FormsModule. You must opt-in to using that module.

NgModel은 Angular의 지시어이긴 하지만 디폴트로 지원하지는 않는다. 옵션적인 FormsModule에 속해있다.

Import the FormsModule

FormsModule을 import하자

Open the app.module.ts file and import the FormsModule symbol from the @angular/forms library. Then add the FormsModule to the @NgModule metadata's imports array, which contains the list of external modules that the app uses.

App.moule.ts 파일을 열고 FormsModule 심볼을 @angular/forms 라이브러리에서 import한다.

The updated AppModule looks like this:

업데이트된 AppModule은 이렇게 보인다:

app.module.ts (FormsModule import)

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
import { AppComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the

above the textbox.

브라우저가 새로고침되면, 앱은 다시 실행될 것이다. 여러분은 영웅의 이름을 수정하면 텍스트상자 위

에서 바로 변화가 일어나는걸 볼 수 있다.

---

The road you've travelled

이제까지 당신이 한 일들

Take stock of what you've built.

여러분이 이룬것을 보자.

The Tour of Heroes app uses the double curly braces of interpolation (a type of one-way data binding) to display the app title and properties of a Hero object.

You wrote a multi-line template using ES2015's template literals to make the template readable.

You added a two-way data binding to the element using the built-in ngModel directive. This binding both displays the hero's name and allows users to change it.

The ngModel directive propagates changes to every other binding of the hero.name.

Your app should look like this live example / downloadable example.

Tour of Heroes앱은 더블 중괄호의 interpolation(한방향으로 데이터를 묶는것)을 사용한다. 이를 통해 앱의 타이틀과 Hero 객체의 속성을 보여준다.

여러분은 ES2015의 템플릿 리터럴상수를 사용해 템플릿을 읽기 좋게 여러줄로 적었다.

Here's the complete app.component.ts as it stands now:

완벽한 app.component.ts는 다음과 같다:

srcappapp.component.ts

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

---

The road ahead

In the next tutorial page, you'll build on the Tour of Heroes app to display a list of heroes. You'll also allow the user to select heroes and display their details. You'll learn more about how to retrieve lists and bind them to the template.

다음 튜토리얼에서 여러분은 영웅들의 리스트를 보여주기 위해 Tour of Heroes앱을 만들것이다. 여러분은 또한 사용자들에게 영웅을 선택하고 그들의 세부사항을 볼 수 있도록 만들것이다. 여러분은 어떻게 리스트를 검색하고 템플릿에 바인닝 할지 더 배울것이다.