Click Outside Directive

Directive phát hiện click bên ngoài hoặc bên trong element, hữu ích cho dropdowns, modals, và popups.

Features

• ✅ Detect clicks outside element
• ✅ Detect clicks inside element
• ✅ Auto cleanup với takeUntilDestroyed
• ✅ Sử dụng mousedown event để catch sớm hơn
• ✅ Standalone directive - dễ dàng import
• ✅ TypeScript support đầy đủ

Installation

npm install @libs-ui/components-click-outside

Usage

Basic Example

import { Component } from '@angular/core';
import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsClickOutsideDirective],
  template: `
    <div
      LibsUiComponentsClickOutsideDirective
      (outOutside)="onClickOutside($event)"
      (outInSide)="onClickInside($event)">
      Click inside or outside this element
    </div>
  `,
})
export class ExampleComponent {
  onClickOutside(event: Event): void {
    console.log('Clicked outside!', event);
  }

  onClickInside(event: Event): void {
    console.log('Clicked inside!', event);
  }
}

Dropdown Example

import { Component, signal } from '@angular/core';
import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';

@Component({
  standalone: true,
  imports: [LibsUiComponentsClickOutsideDirective],
  template: `
    <div class="relative">
      <button (click)="isOpen.set(!isOpen())">Toggle Dropdown</button>

      @if (isOpen()) {
        <div
          LibsUiComponentsClickOutsideDirective
          (outOutside)="isOpen.set(false)"
          class="absolute mt-2 w-48 bg-white border rounded-lg shadow-lg">
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>
      }
    </div>
  `,
})
export class DropdownExample {
  readonly isOpen = signal<boolean>(false);
}

Modal Example

import { Component, signal } from '@angular/core';
import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';

@Component({
  standalone: true,
  imports: [LibsUiComponentsClickOutsideDirective],
  template: `
    @if (showModal()) {
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <div
          LibsUiComponentsClickOutsideDirective
          (outOutside)="showModal.set(false)"
          class="bg-white p-6 rounded-lg shadow-xl">
          <h3>Modal Title</h3>
          <p>Click outside to close</p>
        </div>
      </div>
    }
  `,
})
export class ModalExample {
  readonly showModal = signal<boolean>(false);
}

API Reference

Outputs

| Property | Type | Description | | -------------- | ------- | -------------------------------- | | (outOutside) | Event | Emit khi click bên ngoài element | | (outInSide) | Event | Emit khi click bên trong element |

Important Notes

⚠️ Event Timing: Directive sử dụng AfterViewInit, event listener được setup sau khi view init.

⚠️ Event Type: Lắng nghe mousedown event thay vì click để catch event sớm hơn.

⚠️ stopPropagation: Event được stopPropagation() để tránh conflicts với parent handlers.

⚠️ Memory Leak: Tự động cleanup với takeUntilDestroyed khi directive bị destroy.

Use Cases

• Đóng dropdown/menu khi click bên ngoài
• Đóng modal/dialog khi click vào overlay
• Đóng tooltip/popover khi click ra ngoài
• Detect user interaction với element cụ thể
• Implement click-away behavior cho custom components

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Dependencies

• @angular/core >= 18.0.0
• rxjs ~7.8.0

License

MIT