Angular @HostListener 디렉티브 활용 가이드
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

@HostListener Angular 디렉티브 활용 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • Angular 프론트엔드 개발자 (중간~고급 수준)
  • 디렉티브/이벤트 처리 기술 확장을 원하는 개발자
  • Angular 20 버전 기반 구현 사례 포함

핵심 요약

  • @HostListener디렉티브/컴포넌트 호스트 요소에서 DOM 이벤트를 감지하여 커스텀 로직 실행 가능
  • @HostListener('event', ['$event']) 형태로 템플릿 없이 이벤트 바인딩 가능
  • window:resize, document:click, keydown.shift.i글로벌 이벤트 처리 가능
  • Angular Ivy 컴파일러hostBindings하위 레벨 이벤트 바인딩으로 변환

섹션별 세부 요약

1. @HostListener 기본 개념

  • 호스트 요소( 태그)에 mouseover/mouseleave 이벤트 감지
  • Directive 클래스@HostListener 사용 예:

```ts

@HostListener('mouseover', ['$event']) mouseOver(event: MouseEvent) { ... }

```

  • Renderer2를 통해 CSS 클래스 동적 추가/제거 가능

2. 글로벌 이벤트 처리 예시

  • window:resize 이벤트 감지:

```ts

@HostListener('window:resize', ['$event']) onResize(event: Event) { ... }

```

  • document:click 이벤트 감지:

```ts

@HostListener('document:click', ['$event']) onDocumentClick(event: MouseEvent) { ... }

```

3. 키보드 단축키 처리

  • window:keydown.shift.i 이벤트 감지:

```ts

@HostListener('window:keydown.shift.i', ['$event']) onShortcut(event: KeyboardEvent) { ... }

```

  • 접근성 기능/단축키 구현에 활용 가능

4. Angular 내부 동작 원리

  • makePropDecorator 함수를 통해 메타데이터 생성
  • Ivy 컴파일러hostBindings 형태로 하위 레벨 호스트 바인딩 생성 예:

```ts

hostBindings: function About_HostBindings(rf, ctx) { ... }

```

결론

  • @HostListener템플릿 없이 이벤트 처리를 간결하게 가능하게 함
  • 재사용 가능한 디렉티브/반응형 레이아웃 구현에 유리
  • Angular DI 및 변경 감지와 호환되며, 코드 중복 최소화 가능
  • @HostListener 사용 시 이벤트 이름/인자 명확히 지정하고, Renderer2를 통해 안정적인 DOM 조작 권장