Generic components <T>

export interface Column<T> {
  key: Extract<keyof T, string>;      // only real keys of T
  header: string;
  sortable?: boolean;
  align?: 'left' | 'right';
  format?: (row: T) => string;
}

@Component({
  selector: 'app-data-table',
  imports: [NgTemplateOutlet],
  template: `
    <table>
      <thead>
        <tr>
          @for (col of columns(); track col.key) { <th (click)="toggleSort(col.key)">{{ col.header }}</th> }
        </tr>
      </thead>
      <tbody>
        @for (row of sortedRows(); track trackBy()(row)) {
          <tr (click)="rowClick.emit(row)">
            @for (col of columns(); track col.key) {
              <td>
                @if (cellTemplates().get(col.key); as tpl) {
                  <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: row, value: row[col.key] }" />
                } @else {
                  {{ col.format ? col.format(row) : row[col.key] }}
                }
              </td>
            }
          </tr>
        }
      </tbody>
    </table>
  `,
})
export class DataTable<T> {                       // ← the component’s type parameter
  readonly rows = input.required<readonly T[]>(); // ← T is inferred from here
  readonly columns = input.required<readonly Column<T>[]>();
  readonly trackBy = input<(row: T) => unknown>((row) => row);
  readonly rowClick = output<T>();               // ← typed output

  private readonly cellDirectives = contentChildren(CellTemplate<T>);
  protected readonly cellTemplates = computed(
    () => new Map(this.cellDirectives().map((d) => [d.appCell(), d.template] as const)),
  );

  protected readonly sort = signal<{ key: keyof T; dir: 'asc' | 'desc' } | null>(null);
  protected readonly sortedRows = computed(() => { /* sorting by this.sort() */ });
}

<app-data-table
  [rows]="users()"
  [columns]="userColumns"
  [trackBy]="byId"
  (rowClick)="open($event)"      <!-- $event: UserDto -->
>
  <ng-template appCell="role" [appCellOf]="users()" let-user>
    <app-role-badge [role]="user.role" />   <!-- user: UserDto, autocomplete works -->
  </ng-template>
</app-data-table>

// Another classic example: a Select<T> that works with any object
@Component({
  selector: 'app-select',
  template: `
    <select (change)="pick($any($event.target).selectedIndex - 1)">
      <option disabled [selected]="!value()">{{ placeholder() }}</option>
      @for (o of options(); track $index) {
        <option [selected]="isSelected(o)">{{ displayWith()(o) }}</option>
      }
    </select>
  `,
})
export class Select<T> {
  readonly options = input.required<readonly T[]>();
  readonly value = model<T | null>(null);
  readonly displayWith = input<(item: T) => string>((item) => String(item));
  readonly compareWith = input<(a: T, b: T) => boolean>((a, b) => a === b);
  readonly placeholder = input('Choose…');

  protected isSelected(o: T) {
    const v = this.value();
    return v !== null && this.compareWith()(o, v);
  }
  protected pick(i: number) {
    this.value.set(this.options()[i] ?? null);
  }
}

// <app-select [options]="countries()" [(value)]="country" [displayWith]="byName" />

// Composition: the domain component wraps the generic component.
// DataTable<T> lives in shared/ui; UsersTable lives in features/users/ui.
@Component({
  selector: 'app-users-table',
  imports: [DataTable, CellTemplate, RoleBadge],
  template: `
    <app-data-table [rows]="users()" [columns]="columns" [trackBy]="byId" clickable (rowClick)="open.emit($event)">
      <ng-template appCell="role" [appCellOf]="users()" let-user>
        <app-role-badge [role]="user.role" />
      </ng-template>
    </app-data-table>
  `,
})
export class UsersTable {
  readonly users = input.required<User[]>();
  readonly open = output<User>();
  protected readonly byId = (u: User) => u.id;
  protected readonly columns: Column<User>[] = [/* the domain columns, in one place */];
}

// ✗ The “generic component” that grew out of control
@Component({ selector: 'app-table' })
export class Table {
  @Input() data: any[] = [];                  // any → zero safety
  @Input() showRoleColumn = false;            // domain knowledge in shared
  @Input() roleColors: Record<string, string> = {};
  @Input() isProductTable = false;            // ifs on “what kind of table is this”
  @Input() priceCurrency = 'RON';
  @Input() highlightAdmins = true;
  @Input() exportToExcel = false;
  // ... 30 more inputs
}
// The solution: generic types + cell templates + domain wrappers.