앵귤러 템플릿 - event binding

 

이벤트 바인딩은 화면에 입력된 유저의 행동을 감지하고 해당 정보를 데이터 소스로 보내주는 역할을 합니다.

 

사용방법

앵귤러이벤트는 HTML에서 제공하는 이벤트 명 (on 제외)을 괄호로 감싸서 이벤트바인딩에 사용되는 이벤트임을 표시하는데요. 문법은 아래와 같이 템플릿에서 이벤트 지정 후 큰따옴표 안에 원하는 행동이나 값을 넣으면 됩니다.

 

event.component.html

<button (click)="onClick()">Click</button>

위와 같이 function을 사용한 경우 해당 function을 TypeScript class 파일에 만들어 주어야 제대로 작동합니다.

 

event.component.ts

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

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.css']
})

export class EventComponent implements OnInit {  
  constructor() {}

  ngOnInit(): void {} 
  
  onClick() {
    // code here
  }
}

아래와 같은 방법으로 해당이벤트를 매개변수로 전달하여 활용하는 것도 가능합니다. 주의할 점은 아무 이름이나 사용할 수 없으며 반드시 '$event'라는 매개변수 명으로 보내주어야 해당 이벤트 매개변수로 인식합니다.

<button (click)="onClick($event)">Click</button>

keydown 이벤트의 경우 원하는 키를 마침표( . )로 연결해서 해당 키가 눌러졌을 때 발동시키는 것도 가능합니다.

<input (keydown.enter)="onKeydown($event)" />

이상으로 event binding에 대해서 알아보았습니다.

---

참고

Angular