@libs-ui/components-component-outlet

@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):

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

✅ Cách mới (Recommended):

// 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

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

Sử dụng cơ bản

1. Tạo Custom Component (Extend Base)

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

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

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

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

License

MIT