Angular에서 이벤트 바인딩은 템플릿 내에서 발생하는 이벤트를 처리하는 방법입니다. 사용자가 버튼을 클릭하거나 입력 필드에서 값을 변경하는 등의 상황에서 발생하는 이벤트를 처리할 수 있습니다.

바인딩 방법

Angular에서는 템플릿 내에서 이벤트를 처리하기 위해 이벤트 바인딩을 사용합니다. 이벤트 바인딩은 (event)="expression" 형식으로 작성됩니다. 여기서 event는 이벤트의 이름이고, expression은 이벤트가 발생했을 때 실행될 표현식이 됩니다.

예를 들어, 버튼 클릭 이벤트를 처리하는 경우 아래와 같이 사용할 수 있습니다.

<button (click)="onButtonClick()">클릭</button>

컴포넌트에서 이벤트 처리

이벤트 바인딩으로 연결된 이벤트가 발생하면, 컴포넌트 클래스 내의 메서드가 실행됩니다.

export class MyComponent {
  onButtonClick() {
    console.log('버튼이 클릭되었습니다!');
  }
}

위의 예제에서 onButtonClick 메서드는 버튼을 클릭했을 때 콘솔에 메시지를 출력하는 역할을 합니다.

데이터 전달

이벤트 바인딩을 사용하여 특정 이벤트가 발생했을때, 컴포넌트에 데이터를 전달할 수도 있습니다.

<button (click)="onButtonClick('hello')">클릭</button>

export class MyComponent {
  onButtonClick(message: string) {
    console.log('전달된 메시지:', message);
  }
}

결론

이벤트 바인딩을 이용하면 사용자의 동작에 반응하여 원하는 동작을 처리할 수 있으며, 이를 통해 Angular 애플리케이션의 상호작용성을 높일 수 있습니다.

Angular 이벤트 바인딩 공식 문서

이상으로 Angular 이벤트 바인딩에 대해 알아보았습니다. 부가적인 질문이 있으시면 언제든지 물어보세요.