Angular 이벤트 바인딩 (Event Binding)

이번에는 이벤트 바인딩에 대해서 알아보겠습니다.

데이터 바인딩은 ts파일의 변수를 html 에서 이용하는 것이었죠.

이번 바인딩은 html의 이벤트를 ts파일의 메소드와 연결하는 것입니다.

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

여기서 중요한 부분은 click 이벤트를 ( ): Event Binding 으로 감싼 것입니다.

click 이벤트를 ts의 onAddIncome() 라는 메소드와 연결해준 것이죠.

당연히 ts 파일에는 onAddIncome() 메소드가 있어야겠죠?

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

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 1000;
    ngOnInit(){ }
    onAddIncome(){
      this.budget += this.budget;
    }
}

자동으로 budget 이 올라가는 타이머 코드는 삭제하구요.

ts 파일에 onAddIncome() 메소드를 만들어줍니다.

input에 써있는 값 역시 budget이므로 그만큼 더해지도록 합니다.

이렇게하면 버튼을 클릭할 때마다 budget이 2배가 됩니다.

이벤트 바인딩 동작화면

아주 쉽게 ts 파일의 메소드를 html에서 호출하는 것을 볼 수 있습니다.

이벤트 발생시 활용해야하는 값이 있다면 $event를 변수로 받을 수 있는데요.

활용은 다음 기회로 남겨두도록 하겠습니다.

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