Angular 데이터바인딩 II (Property Binding)

String이 바인딩이 되었다면 다른 것도 가능하겠죠??

오늘은 Property 바인딩에 대해서 보겠습니다.

html 태그의 속성과 ts 클래스의 변수를 연결합니다.

역시 말보다는 코드를 보는 게 더 쉽겠죠?

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

지난 번 ts 코드의 template부분을 변경합니다.

template을 templateUrl 로 수정하구요.

지난번 지우지 않고 그대로 둔 html 파일 경로를 설정합니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [value]="budget">
<button>Add Income</button>

budget.component.html에 Property Binding을 적용해보죠.

위의 코드에서 중요한 부분은 [value] 부분입니다.

대괄호 [ ]는 원래 html 코드에는 없는 내용이죠.

input 태그의 value 속성에 ts 코드의 값을 맵핑할 수 있습니다.

budget값은 ts 코드에 정의된 변수 이름입니다.

<h3> 태그에 있는 값과 동일하죠.

결과화면은 아래와 같습니다.

property binding 결과화면

Input의 값이 budget값과 동일하게 바뀌는 것을 볼 수 있습니다.

물론 아래와 같이 String Interpolation을 이용해도 동일합니다.

<input type="text" value="{{budget}}">

다음에는 Event Binding을 통해 Add Income 버튼을 동작시켜보죠.

소스주소: https://github.com/jsrho1023/account-book