[Angular] HostBinding VS. HostListener

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

@HostBinding 과 @HostListener

전혀 다른 directive이지만, Host라는 같은 단어가 있어 "비슷한 기능을 하는건가...?" 싶더라구요~

정확히 정리해보려 합니다. 🤗

 

---

1. @HostListener

listener 라는 단어에서 알 수 있듯이 

무언가 event가 발생하는 것을 듣고 있다는 느낌이 들지 않나요?! (저만 그런가요... ㅋㅋ)

이처럼 @HostListener는 이벤트 핸들링과 관련된 디렉티브입니다.

 

@HostListener('click', ['$event.target'])
onClick(target) {
	console.log('click!', target);
}

 

- first parameter : 이벤트 명

- second parameter : 이벤트 타겟(생략 가능)

 

 

2. @HostBinding

Binding이라는 단어에서 알 수 있듯이 

데이터 바인딩에 관련한 디렉티브입니다.

 

@HostBinding('class.valid') 
public get valid() {
	return this.control.valid;
}

 

- first parameter : element의 속성 (위의 예시에서는 class 명)

 

element의 속성이 변할 때, angular에서는 이것을 감지하여 

무언가 update(valid 함수 내 기능 수행)를 진행합니다.

 

---

 

 

[References]

[Angular] HostListener vs HostBinding