Composants génériques <T>

export interface Column<T> {
  key: Extract<keyof T, string>;      // uniquement de vraies clés de 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> {                       // ← le paramètre de type du composant
  readonly rows = input.required<readonly T[]>(); // ← T est inféré à partir d’ici
  readonly columns = input.required<readonly Column<T>[]>();
  readonly trackBy = input<(row: T) => unknown>((row) => row);
  readonly rowClick = output<T>();               // ← output typé

  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(() => { /* tri selon 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, l’autocomplétion fonctionne -->
  </ng-template>
</app-data-table>

// Un autre exemple classique : un Select<T> qui fonctionne avec n’importe quel objet
@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('Choisir…');

  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 : le composant métier enveloppe le composant générique.
// DataTable<T> vit dans shared/ui ; UsersTable vit dans 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>[] = [/* les colonnes métier, au même endroit */];
}

// ✗ Le « composant générique » qui a dérapé
@Component({ selector: 'app-table' })
export class Table {
  @Input() data: any[] = [];                  // any → aucune sûreté
  @Input() showRoleColumn = false;            // connaissance du domaine dans shared
  @Input() roleColors: Record<string, string> = {};
  @Input() isProductTable = false;            // des if sur « quel type de tableau est-ce »
  @Input() priceCurrency = 'RON';
  @Input() highlightAdmins = true;
  @Input() exportToExcel = false;
  // ... 30 inputs de plus
}
// La solution : types génériques + templates de cellule + wrappers métier.