@libs-ui/services-dynamic-component

> Service để tạo và quản lý Angular components động tại runtime.

📦 Cài đặt

``bash
npm install @libs-ui/services-dynamic-component
`

🚀 Sử dụng

`typescript
import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';

@Component({...})
export class MyComponent {
private dynamicService = inject(LibsUiDynamicComponentService);

createComponent() {
const componentRef = this.dynamicService.resolveComponentFactory(MyDynamicComponent);
this.dynamicService.addToBody(componentRef);
}
}
`

📚 API Reference

$3

| Method | Parameters | Returns | Description |
|--------|-----------|---------|-------------|
| resolveComponentFactory | component: any | ComponentRef | Tạo ComponentRef từ component class |
| addToBody | componentRef?: ComponentRef, isAddParentDocument?: boolean, timerDelayUpdateStyleToParent?: number | string | Thêm component vào document.body hoặc parent document |
| addToElement | componentRef: any, elementAdd: any | void | Thêm component vào element cụ thể |
| addToElementLayoutContentDefault | componentRef: any, id?: string | void | Thêm component vào element có id mặc định |
| addToIdAttributeElement | componentRef: any, id: string | void | Thêm component vào element có id cụ thể |
| delete | componentRef: any, options?: { ignoreDestroyComponent?: boolean; timeoutDestroy?: number } | void | Xóa component khỏi DOM và destroy |
| remove | componentRef: any, _?: string, ignoreDestroyComponent?: boolean | void | ⚠️ Deprecated - Dùng delete() thay thế |

$3

| Property | Type | Description |
|----------|------|-------------|
| IdElementLayoutContentDefault | string (setter) | Set ID mặc định cho element layout content |

🔍 Hidden Logic (Logic Ẩn)

$3

Service là singleton (providedIn: 'root'), nghĩa là:
- Tất cả instances trong app share cùng một state
- elementLayoutContent Map được cache và share giữa tất cả usages
- elementBody được cache một lần và reuse

Ví dụ:
`typescript
// Component A
this.dynamicService.addToIdAttributeElement(compRef, 'container-1');

// Component B - Cùng service instance
// elementLayoutContent Map đã có 'container-1' được cache
this.dynamicService.addToIdAttributeElement(compRef2, 'container-1');
// Không cần query DOM lại
`

$3

Service sử dụng Map để cache DOM elements:
- Lần đầu gọi addToIdAttributeElement() với id mới: Query DOM và cache
- Lần sau: Lấy từ cache, không query DOM lại
- Lưu ý: Nếu element bị xóa khỏi DOM, cache vẫn giữ reference cũ

Ví dụ:
`typescript
// Lần 1: Query DOM và cache
this.dynamicService.addToIdAttributeElement(compRef1, 'my-container');
// elementLayoutContent.set('my-container', document.getElementById('my-container'))

// Lần 2: Lấy từ cache (nhanh hơn)
this.dynamicService.addToIdAttributeElement(compRef2, 'my-container');
// elementLayoutContent.get('my-container') - không query DOM
`

$3

Khi isAddParentDocument = true:
- Component được append vào window.parent.document.body (không phải current document)
- Styles từ current document được clone và append vào parent document
- WeakMap được dùng để track styles đã copy, tránh duplicate

Ví dụ:
`typescript
// Trong iframe
const compRef = this.dynamicService.resolveComponentFactory(MyComponent);
this.dynamicService.addToBody(compRef, true);
// Component xuất hiện trong parent window, không phải iframe
// Styles từ iframe được copy sang parent document
`

$3

Khi add component vào parent document:
- Tất cả