새로운 컴포넌트 등록 및 데이터 바인딩

다음과 같이 컴포넌트를 생성한다.

ng generate component heroes

 

1.hero.ts

export class={
  id:number,
  name: string
}

2.hero.component.ts

import 'hero' from './hero'             //6-10번줄을 사용하기 위함


export class HeroesComponent implements OnInit {

  hero: Hero = {
    id: 1,
    name: 'winstrom',
  };
  constructor() {}

  ngOnInit(): void {}
}

3.hero.component.html  (바인딩)

<h1>{{title}}</h1>

<div>
 <input ([ngModel]) = " hero.id   " >
 <input ([ngModel]) = " hero.name " >
</div>

해당 hero.name 으로 바인딩 된다. 

4.app.Modules.ts

import { FormsModule } from '@angular/forms'; // <-- NgModel 사용하고자 필요


imports: [
  ...
  FormsModule,
  ...
],

 

 

5. 이제 hero 컴포넌트가 완성되었고, app.Module에서 hero컴포넌트를 등록시킬것.

import { HeroesComponent } from './heroes/heroes.component'      //heroes.component.ts가 등록됨

declarations: [
  AppComponent,
  HeroesComponent
],

 

6. app.Component.html 에서

   <app-heroes> 를 이용해서 등록한다.     ( heroes.component.ts 의 selector 에 이름 작성되어있다.