[Angular 4/vscode] 4. 데이터 바인딩

이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다.

 

https://angular.io/tutorial

 

 

이전 글에 이어서 진행되는 내용입니다.

 

2020/07/29 - [개발 일지] - [Angular 4/vscode] 3. 컴포넌트, 서비스 생성

[Angular 4/vscode] 3. 컴포넌트, 서비스 생성

 

 

---

 

 

1. 단방향 바인딩

 

ts 파일에 작성해둔 변수 예시입니다.

 

// src/app/heroes/heroes.component.ts file


  // string
  title : string = "heroes page";
  
  // array
  heroList : Array<string> = ["thor", "ironman", "spiderman"];

  // object
  heroObj : Object = {
    key1 : "thor",
    key2 : "ironman",
    key3 : "spiderman"
  }

<!-- src/app/heroes/heroes.component.html -->

<!--string-->
<h2>{{title}}</h2>

<!--array-->
<ul>
    <li>{{heroList[0]}}</li>
    <li>{{heroList[1]}}</li>
    <li>{{heroList[2]}}</li>
</ul>

<!--object-->
<div>{{heroObj['key1']}}</div>
<div>{{heroObj['key2']}}</div>
<div>{{heroObj['key3']}}</div>

 

데이터를 화면에 노출 되도록 바인딩했지만, 데이터를 수정하는 등 별도의 상호작용은 불가능합니다.

 

진짜 안되는지 궁금해서 확인해봤습니다.

<h2>{{title}}</h2>
<input type="text" value={{title}}>

 

이렇게 하고 텍스트를 수정했는데 h2 태그의 {{title}}은 변경되지 않았습니다.

 

 

 

 

 

2. 양방향 바인딩

 

자 이제 데이터까지 수정이 가능하게 하는 방법입니다.

 

우선, 양방향 바인딩을 하기 위해 app.module.ts 파일에 FormsModule모듈을 추가해줍니다.

 

// src/app/app.module.ts
import { FormsModule } from '@angular/forms';
.
.
.
imports: [
  BrowserModule,
  FormsModule
],

 

import 한 뒤 imports까지 추가 해줘야 사용이 가능합니다.

 

 

다시 heroes.component.html 파일로 가서 바인딩 구문을 아래와 같이 변경해줍니다.

 

<h2>{{title}}</h2>
<input type="text" [(ngModel)]="title">

 

이렇게 하면 text박스 내용을 수정했을 때 title의 데이터가 수정되어 h2 태그까지 수정된 내용으로 반영됩니다.

 

 

 

checkbox의 경우 아래와 같이 테스트 했습니다.

 

<input type="checkbox" [(ngModel)]="checkPoint1">

<div>Checkbox 체크 여부 : {{checkPoint1}}</div>

 

이렇게 하면 아래 div에서 체크 여부를 true, false 로 확인할 수 있는데,

 

ngIf 를 이용하면 체크를 했을 때 추가 입력이 가능한 입력창을 노출시키는 등의 응용이 가능합니다.

 

<input type="checkbox" [(ngModel)]="checkPoint1">

<div *ngIf="checkPoint1"> 체크의 맛이로구나! </div>

 

 

 

 

3. 바인딩 끝