DialogService

Version: 0.2.355-10

Service giúp tạo và quản lý Modal Dialog động trong ứng dụng Angular một cách chuyên nghiệp.

Giới thiệu

LibsUiDialogService cung cấp phương thức addDialog để hiển thị Modal một cách linh hoạt mà không cần khai báo thẻ Modal trong template. Service này quản lý việc tạo component động, chèn vào body (hoặc parent document) và xử lý vòng đời của Dialog.

Lưu ý quan trọng (Important Notes)

⚠️ Caveats & Logic Conflicts:

• buttonsFooter Override: Khi có buttonsFooter, các configAgreeEvent/configCancelEvent KHÔNG hoạt động (button chỉ gọi action(), không emit event). Chỉ configCloseEvent hoạt động khi click nút Close (X) ở header.
• Khuyến nghị: Dùng buttonsFooter → xử lý logic trong button.action(). KHÔNG dùng configAgreeEvent/configCancelEvent.
• Width mặc định: 500px nếu không cấu hình.
• Auto-close: Dialog tự đóng sau action. Để ngăn: set ignoreRemoveDialog: true hoặc gọi removeDialog(id) thủ công.

Cài đặt

npm install @libs-ui/services-dialog

Import

import { LibsUiDialogService } from '@libs-ui/services-dialog';

@Component({
  standalone: true,
  imports: [], // Không cần import vào đây vì là Service
  // ...
})
export class YourComponent {
  private dialogService = inject(LibsUiDialogService);
}

Cách sử dụng

1. Dialog cơ bản

this.dialogService.addDialog({
  title: 'Thông báo',
  bodyConfig: {
    lines: [{ text: 'Nội dung thông báo đơn giản.' }],
  },
});

2. Dialog xác nhận với xử lý Async

const dialogId = this.dialogService.addDialog({
  title: 'Xác nhận xóa',
  bodyConfig: {
    lines: [{ text: 'Bạn có chắc chắn muốn xóa mục này?' }],
  },
  configAgreeEvent: {
    ignoreRemoveDialog: true, // Không đóng ngay để đợi xử lý
    callback: async (control) => {
      control?.setStateDisable(true); // Disable nút tránh click nhiều lần
      await this.apiService.deleteItem();
      this.dialogService.removeDialog(dialogId); // Đóng thủ công sau khi xong
    },
  },
});

API Reference

Methods

| Method | Description | Parameters | Returns | | ----------------------------------------- | ------------------------------------------------------ | -------------------------------------------------- | -------------------- | | addDialog(config, isAddParentDocument?) | Tạo và hiển thị một Dialog mới. | config: IDialog, isAddParentDocument?: boolean | string (Dialog ID) | | removeDialog(id) | Đóng và xóa Dialog theo ID. | id: string | void | | clearDialogsRef() | Xóa tất cả các Dialog đang mở. | - | void | | switchDisableActionsOnDialog(id) | Bật/tắt trạng thái disable của các action trên Dialog. | id: string | void |

IDialog Configuration

| Property | Type | Default | Description | | ------------------- | ---------------------------- | ---------- | ------------------------------------------ | | title | string | - | Tiêu đề của Dialog. | | bodyConfig | IModalBodyConfig | - | Cấu hình nội dung (lines, icon, class...). | | buttonsFooter | IButton[] | - | Danh sách button tùy chỉnh ở footer. | | width | string | '500px' | Độ rộng của Dialog. | | height | string | 'auto' | Chiều cao của Dialog. | | mode | 'center' \| 'offset-right' | 'center' | Vị trí hiển thị Dialog. | | disable | boolean | false | Khóa toàn bộ tương tác trên Dialog. | | configAgreeEvent | IDialogConfigEvent | - | Xử lý khi nhấn nút Đồng ý. | | configCancelEvent | IDialogConfigEvent | - | Xử lý khi nhấn nút Hủy. | | configCloseEvent | IDialogConfigEvent | - | Xử lý khi đóng Dialog (X). | | zIndex | number | - | Thứ tự hiển thị lớp. | | titleUseInnerText | boolean | false | Dùng innerText cho title (Security). |

Demo Links

• Local Development: http://localhost:4500/services/dialog
• Production: Tạm thời không khả dụng