Angular - generyczny komponent. Jak podać typ w HTML

Witam.
Czy ktoś ma jakieś rozwiązanie na generyczne komponenty, które nie są tworzone w TypeScript? Mam kilka tabel w projekcie, chciałbym je uporządkować i zrobić lekko uniwersalnie, aby można było wszędzie użyć tego komponentu. Generyczny komponent jest tutaj idealnym rozwiązaniem ale mam problem z podaniem typu danych w tym komponencie.

import { Component, OnInit, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent<T> implements OnInit {

  @Input() data: T[];
  datasource: MatTableDataSource<T>;

  constructor() { }

  ngOnInit(): void {
  }
}

Komponentu użyje w ten sposób

<app-table [data]="myData"></app-table>

Jak przekazać w HTMLu typ komponentu. Jest to w ogóle możliwe? Gdzie na GH widziałem, że taki sposób jest w stanie przyjąć tylko any ale wpisy były sprzed 3 lat.

a co w podanym kodzie nie działa? I jak chcesz to wykorzystać? Ten kod powinien działać i tak wygląda na przykład implementacja cdk-table, z tym że komponent tak naprawdę przyjmie dowolne dane i niczym się za bardzo nie różni od any - nic chyba nie będzie sprawdzało typu nigdzie, a gdy będziesz się chciał odwołać do komponentu z kodu, np z @ViewChild to sam musisz podać typ danych i może to być nawet inny typ niż ten przekazany

Problem polega na tym, że muszę wiedzieć jakiego typu jest tabela, aby pobrać i odpowiednio ją skonfigurować w komponencie. Tabela towarów będzie miała inne kolumny niż tabela dokumentów czy kontrahentów. Chciałbym to jakoś rozgraniczyć. Na tę chwilę, "różnych" tabel mam 7 i dla każdej stworzyłem komponent - ProductsTable, CustomersTable, DocumentstTable... Kiepsko się później dopisuje jakieś rzeczy jak trzeba tonę kodu przekopiować, a że nie jestem jeszcze orłem w Angular to małymi kroczkami wyrabiam sobie pewne standardy.

Jeśli masz jakąś propozycję to poproszę. To jest pierwsze co mnie do głowy przyszło.

moim zdaniem komponent powinien być jeden, typy, kolumny itp możesz podawać jako konfigurację tabeli jako drugi input.
Chciałbyś żeby cała tabela zmieniała wygląd i zachowanie na podstawie typu danych w liście? Nie wydaje mi się to dobrym rozwiązaniem o ile to w ogóle możliwe bo na etapie javascriptu nie ma już żadnych typów i może to działać kulawo - przykładowo obiekty odebrane z serwera wcale nie będą odpowiedniego typu tylko zwykłymi obiektami mimo że typescript może mówić coś innego. Już lepiej stworzyć prosty enum

Tabela ma tylko przyjąć odpowiednie dane z parenta i je wyświetlić. Część wspólna wszystkich tabel są filtry, szukajka, paginacja, przejście do edycji na click. Żadna z tabel nie ma swoich oryginalnych kwestii, której nie da się obsłużyć uniwersalnie.

Dane wpadają do parenta z API, parent przekazuje dane, kolumny, zapamiętane filtry do komponentu z tabelą i finito. Obawiam się, że Angular tego generycznie nie ogarnia. Czyli musiałbym to zrobić z pomocą @Input() lub serwisu. Czyli

import { Component, OnInit, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  @Input() data: any[];
  @Input() columns: Column[];
  @Input() filters: Filter[];
  datasource: MatTableDataSource<any>;

  constructor() { }

  ngOnInit(): void {
  }
}

Jedyne możliwe rozwiązanie, które zadziała.