Angular table with dynamic autocomplete filters

80 views Asked by At

I created an angular component representing a table that autoconstructs itself depending on informations received from server. I implemented a dynamic system of filters, allowing users to filter on every column of the table, creating them by leveraging received data. The last step would be adding autocomplete to these filters to allow users to filter on values shown by each filter, sorry for the inception.

Following official docs, I should add an input and an autocomplete bound via id through #, but I need to do it dynamically, because each filter has its own id, based on column id.

So, I tried something like this

   <input
          type="text"
          matInput
          [formControl]="getFormControl(selectedFilter.id)"
          [matAutocomplete]="selectedFilter.id"
        />
   <mat-autocomplete [attr.id]="selectedFilter.id">

but compiler complains that

" error TS2322: Type 'string' is not assignable to type '_MatAutocompleteBase' " or I can't assign selectedFilter.id to [autocomplete]

I tried to use an index bound to ngFor used to render the filters, but I have the same error.

Has anybody any idea ho I could solve this situation?

Angular version: 16

0

There are 0 answers