Filtering by column in custom Angular data table

I am making a reusable Angular data table component where you have the ability to filter by column. Right now, my approach works but I am concerned that this in not the best practice in Angular. Is there another approach to filtering individual columns other than adding that specific column to "selectColInput" when clicking in the input, and then using that in a filter pipe?

data-table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
                <input type="text"
                [(ngModel)]=fields[col.value] 
                (click)="selectColInput(col.value)"/>
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of data | filter: fields:selectedInput">
        <tr>
            <td *ngFor="let col of cols">{{row[col.value]}}</td>
        </tr>
    </tbody>
</table>

data-table.component.ts

import { ColumnsComponent } from './../columns/columns.component';
import { Component, Input } from '@angular/core';
import { FilterPipe } from './filter.pipe';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})

export class DataTableComponent  {

  @Input() data
  cols: ColumnsComponent[] = []
  selectedInput: string = ''
  fields: any = {}

  selectColInput(col) {
    this.selectedInput = col
  }

  addColumn(column) {
    this.cols.push(column)
  }

}

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(data: any, fields: any, selectedInput: any): any {
    if(!data) return;

    return data.filter( row => {
      if(row[selectedInput] !== null && row[selectedInput] && fields[selectedInput]){
        return row[selectedInput].toLowerCase().includes(fields[selectedInput].toLowerCase())
      }
      return true
    })
  }

}