Angular 외부 클릭 감지 디렉티브 구현 방법
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

Angular 호스트 요소 외부 클릭 감지 디렉티브

카테고리

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

서브카테고리

웹 개발

대상자

  • Angular 개발자
  • 중급~고급 난이도 (디렉티브, 이벤트 핸들링, DOM 조작 기술 필요)

핵심 요약

  • @HostListener('document:click', ['$event.target']) 을 사용해 전체 문서의 클릭 이벤트를 감지
  • this.elementRef.nativeElement.contains(targetElement)호스트 요소 내부 여부를 확인
  • @Output() clickOutside = new EventEmitter() 를 통해 외부 클릭 시 이벤트를 부모 컴포넌트로 전달

섹션별 세부 요약

1. 디렉티브 구현 원리

  • @Directive({ selector: '[appClickOutside]' })커스텀 디렉티브 생성
  • document:click 이벤트 리스너를 등록하여 전역 클릭 감지
  • contains() 메서드로 클릭된 요소가 호스트 요소 내부/외부 여부 판단

2. 모듈 및 컴포넌트 사용법

  • AppModuleClickOutsideDirectivedeclarations 배열에 등록
  • HTML 요소에 appClickOutside 속성 추가
  • (clickOutside)="onClickedOutside()" 이벤트 핸들러 연결

3. 이벤트 처리 예제

  • onClickedOutside() 메서드에서 메시지 업데이트 및 콘솔 로그 출력
  • 버튼 내부 클릭 시 event.stopPropagation() 호출로 디렉티브 이벤트 방지

결론

  • event.stopPropagation() 사용으로 불필요한 이벤트 중복 처리 방지
  • @HostListenercontains() 조합으로 정확한 클릭 영역 감지
  • Directive 기반 접근으로 재사용성과 유지보수성 향상