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. 모듈 및 컴포넌트 사용법
- AppModule에 ClickOutsideDirective를 declarations 배열에 등록
- HTML 요소에 appClickOutside 속성 추가
- (clickOutside)="onClickedOutside()" 이벤트 핸들러 연결
3. 이벤트 처리 예제
- onClickedOutside() 메서드에서 메시지 업데이트 및 콘솔 로그 출력
- 버튼 내부 클릭 시 event.stopPropagation() 호출로 디렉티브 이벤트 방지
결론
- event.stopPropagation() 사용으로 불필요한 이벤트 중복 처리 방지
- @HostListener와 contains() 조합으로 정확한 클릭 영역 감지
- Directive 기반 접근으로 재사용성과 유지보수성 향상