Device Support Handle Click

Directive hỗ trợ xử lý sự kiện click đa thiết bị (desktop/mobile/touch), tự động chọn event phù hợp (click, touchstart, pointerdown) dựa trên loại thiết bị.

Version

0.2.355-14

Khi nào sử dụng

• Khi cần xử lý click event hoạt động đúng trên cả desktop và mobile/touch devices
• Khi cần tự động phát hiện loại thiết bị và chọn event phù hợp (click vs touchstart vs pointerdown)
• Khi cần stopPropagation tự động cho click events
• Khi cần gắn click handler vào một element cụ thể (window, document, hoặc element tùy chỉnh)

Lưu ý quan trọng

• Directive tự động chọn event type: click cho desktop, touchstart cho mobile, pointerdown cho touch devices
• Mặc định stopPropagation được bật - sử dụng [ignoreStopPropagation]="true" để tắt
• Có thể gắn vào element khác thông qua [elementHandleClick]
• Sử dụng getEventNameHandleClick từ @libs-ui/utils để xác định event name
• Directive sử dụng takeUntilDestroyed(destroyRef) để tự động cleanup, tránh memory leak

Cài đặt & Import

import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';

Ví dụ sử dụng

Basic Usage

<button
  libsUiComponentsDeviceSupportHandleClickDirective
  (outClick)="onButtonClick($event)"
  class="px-4 py-2 bg-blue-500 text-white rounded">
  Click me
</button>

import { Component } from '@angular/core';
import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsDeviceSupportHandleClickDirective],
  template: `
    <button
      libsUiComponentsDeviceSupportHandleClickDirective
      (outClick)="onButtonClick($event)">
      Click me
    </button>
  `
})
export class ExampleComponent {
  onButtonClick(event: Event) {
    console.log('Clicked!', event.type);
  }
}

Custom Element Target

<div #targetElement class="p-4 border rounded">
  Target - Click vào đây
</div>

<div
  libsUiComponentsDeviceSupportHandleClickDirective
  [elementHandleClick]="targetElement"
  (outClick)="onTargetClick($event)">
</div>

Disable stopPropagation

<div (click)="onParentClick()">
  <button
    libsUiComponentsDeviceSupportHandleClickDirective
    [ignoreStopPropagation]="true"
    (outClick)="onChildClick($event)">
    Click - event sẽ bubble lên parent
  </button>
</div>

API Reference

Selector

[libsUiComponentsDeviceSupportHandleClickDirective]

Inputs

| Property | Type | Default | Description | |---|---|---|---| | [elementHandleClick] | HTMLElement \| Window \| Document | host element | Element để lắng nghe event click | | [ignoreStopPropagation] | boolean | false | Khi true, không gọi stopPropagation() |

Outputs

| Property | Type | Description | |---|---|---| | (outClick) | Event | Emit event click khi user click/touch vào element |

Logic ẩn

Auto Event Detection

Directive sử dụng getEventNameHandleClick từ @libs-ui/utils để tự động xác định event type:

• Touch device (có onpointerdown và maxTouchPoints > 0): pointerdown
• Desktop: click
• Mobile (non-touch): touchstart

Default stopPropagation

Mặc định, directive gọi e.stopPropagation() trên mỗi event. Set [ignoreStopPropagation]="true" để tắt.

RxJS & DestroyRef

Directive sử dụng fromEvent() kết hợp takeUntilDestroyed(destroyRef) để tự động unsubscribe khi directive bị destroy.

Demo

• Local: http://localhost:4500/device-support

Test

npx nx test components-device-support