데이터 바인딩

영웅을 화면에 나타내기 위해 영웅클래스를 만들어준다. 

 

-------app.component.js----------
>>@Component 의 templatedp 작성할 내용들을 적어준다.

@Component({
  //루트 컴포넌트이다.
  selector: 'app-root',
  //templateUrl: './app.component.html',
  template: `
    <h1>{{ title }}</h1>         // export class의 title사용 
    <h2>{{ hero.name }}</h2>     //히어로 라는 클래스의 name을 사용 ( ngModel로 바인딩 되어있음 
    <div><label>id: </label>{{ hero.id }}</div>

    <div>
      <label> 이름 : </label>
      //아래와 같이 모델링 해준다.
      <input [(ngModel)]="hero.name" placeholder="이름" />
    </div>
  `,
  styleUrls: ['./app.component.css'],
})

[(ngModel)]을 사용하기 위해서는 app.module.ts 에 

import { FormsModule } from '@angular/forms';

@NgModule{

   . . .

   imports: [BrowserModule, AppRoutingModule, FormsModule],

   . . .

 } 위와 같이 추가.