npm package: @libs-ui/components-component-outlet
Description: > ⚠️ **DEPRECATED** - Component này đã cũ và không còn được sử dụng
Latest version: 0.2.356-23

# @libs-ui/components-component-outlet

> ⚠️ **DEPRECATED** - Component này đã cũ và không còn được sử dụng

## ⚠️ Deprecation Notice

**Component này đã bị deprecated và không nên sử dụng trong code mới.**

### Lý do Deprecation

Hàm `getDataComponentOutlet` trong List/Table config đã hỗ trợ trả về input theo component truyền vào, **không cần extend base component này nữa**.

### Migration Guide

**❌ Cách cũ (Deprecated):**

```typescript
// KHÔNG nên làm như này nữa
export class CustomComponent extends LibsUiComponentsComponentOutletComponent {
  // Extend base component
}
```

**✅ Cách mới (Recommended):**

```typescript
// Tạo standalone component với input tùy chỉnh
@Component({
  selector: 'app-custom-component',
  standalone: true,
  template: `
    <div>{{ data().name }}</div>
  `,
})
export class CustomComponent {
  // Input tùy chỉnh theo nhu cầu
  readonly data = input.required<MyCustomType>();
}

// Sử dụng getDataComponentOutlet để map data
configTemplateText: signal({
  getComponentOutlet: () => of(CustomComponent),
  getDataComponentOutlet: (item: any) => ({ data: item }), // Map to component inputs
});
```

---

## Giới thiệu (Legacy Documentation)

`LibsUiComponentsComponentOutletComponent` là một standalone Angular base component được thiết kế để chuẩn hóa input interface cho các custom components sử dụng trong Table, List và các container components khác thông qua Angular Component Outlet pattern.

### Tính năng

- ✅ Base component với standardized input interface
- ✅ Required input `[item]` với type `TYPE_OBJECT`
- ✅ Empty template - components con override template
- ✅ Sử dụng với Angular Component Outlet
- ✅ Type safety với TYPE_OBJECT từ @libs-ui/interfaces-types
- ✅ Standalone Component
- ✅ Minimal overhead

## Khi nào sử dụng

- Khi tạo custom cell component cho Table component với component outlet
- Khi tạo custom item component cho List component với component outlet
- Khi cần chuẩn hóa input interface cho dynamic components
- Khi muốn đảm bảo tất cả custom components nhận cùng một data structure
- Khi extend base component để tạo custom render components

## Important Notes

⚠️ **Base Component**: Đây là base component, KHÔNG sử dụng trực tiếp. Extend component này để tạo custom components.

⚠️ **Empty Template**: Component có template rỗng, các component con phải override template.

⚠️ **Required Input**: Input `item` là required và được chuẩn hóa ở base component.

⚠️ **Component Outlet Pattern**: Sử dụng với Angular Component Outlet trong Table/List để render dynamic components.

## Cài đặt

```bash
npm install @libs-ui/components-component-outlet
```

## Sử dụng cơ bản

### 1. Tạo Custom Component (Extend Base)

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';

// Custom component EXTENDS base component
@Component({
  selector: 'app-custom-list-item',
  standalone: true,
  template: `
    <div class="flex items-center gap-2">
      <span class="font-bold">{{ item().name }}</span>
      <span class="text-xs text-gray-500">ID: {{ item().id }}</span>
      @if (item().status === 'active') {
        <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">Active</span>
      }
    </div>
  `,
})
export class CustomListItemComponent extends LibsUiComponentsComponentOutletComponent {
  // Inherit input 'item' từ base component
  // Không cần khai báo lại input
}
```

### 2. Sử dụng trong List Component

```typescript
import { Component, signal } from '@angular/core';
import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
import { of } from 'rxjs';

@Component({
  selector: 'app-list-example',
  standalone: true,
  imports: [LibsUiComponentsListComponent],
  template: `
    <libs_ui-components-list
      [config]="listConfig()"
      (outSelectedKey)="onItemSelected($event)" />
  `,
})
export class ListExampleComponent {
  readonly listConfig = signal({
    type: 'text',
    httpRequestData: signal({
      objectInstance: returnListObject(myData),
      argumentsValue: [],
      functionName: 'list',
    }),
    configTemplateText: signal({
      fieldKey: 'id',

      // Trả về custom component class
      getComponentOutlet: () => of(CustomListItemComponent),

      // Trả về data cho component
      getDataComponentOutlet: (item: any) => item,
    }),
  });

  onItemSelected(event: any) {
    console.log('Selected:', event);
  }
}
```

## API

### Inputs

| Property | Type          | Default    | Description                                          |
| -------- | ------------- | ---------- | ---------------------------------------------------- |
| `[item]` | `TYPE_OBJECT` | `required` | Data object được pass vào component (required input) |

### Outputs

Component này không có outputs.

## Interfaces

### TYPE_COMPONENT_OUTLET_DATA

```typescript
import { WritableSignal } from '@angular/core';
import { TYPE_OBJECT } from '@libs-ui/interfaces-types';

export type TYPE_COMPONENT_OUTLET_DATA = WritableSignal<TYPE_OBJECT>;
```

Type alias cho WritableSignal chứa TYPE_OBJECT, sử dụng cho reactive data binding.

## Ví dụ nâng cao

### Multiple Custom Components

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';

// Status Cell Component
@Component({
  selector: 'app-status-cell',
  standalone: true,
  template: `
    <span [class]="getStatusClass()">
      {{ item().status }}
    </span>
  `,
})
export class StatusCellComponent extends LibsUiComponentsComponentOutletComponent {
  getStatusClass(): string {
    return this.item().status === 'active' ? 'text-green-600' : 'text-gray-400';
  }
}

// Action Cell Component
@Component({
  selector: 'app-action-cell',
  standalone: true,
  template: `
    <button (click)="handleAction()">Action for {{ item().name }}</button>
  `,
})
export class ActionCellComponent extends LibsUiComponentsComponentOutletComponent {
  handleAction(): void {
    console.log('Action for:', this.item());
  }
}

// Badge Cell Component
@Component({
  selector: 'app-badge-cell',
  standalone: true,
  template: `
    <span class="badge">
      {{ item().count || 0 }}
    </span>
  `,
})
export class BadgeCellComponent extends LibsUiComponentsComponentOutletComponent {
  // Tất cả đều inherit input 'item' từ base component
}
```

## Pattern Benefits

### 1. **Consistency**

Tất cả custom components đều có cùng input interface `[item]`, đảm bảo consistency across codebase.

### 2. **Type Safety**

Sử dụng `TYPE_OBJECT` từ `@libs-ui/interfaces-types` đảm bảo type safety và flexibility.

### 3. **Reusability**

Base component có thể được extend bởi nhiều custom components khác nhau.

### 4. **Component Outlet Integration**

Hoạt động seamlessly với Angular Component Outlet trong Table/List components.

## Dependencies

- `@angular/core` >= 18.0.0
- `@libs-ui/interfaces-types`

## Demo

Xem demo tại: [http://localhost:4500/component-outlet](http://localhost:4500/component-outlet)

## License

MIT