In my code, I have a search bar and I'm trying filter elements of a list according to what I have written. The filter works fine if I search the element in an order. For example, if I search 'red blue yellow' like 'red blue' but, I want the filter work when I search it as 'red yellow' too. Here is my code, what should I add to achieve what I want?

HTML:

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

TS:

dataSource: MatTableDataSource<IProduct>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

filterPredicate(data: IProduct, filter: string) {
    let fullText = "";

    fullText += data.StockIntegrationCode;
    fullText += data.ProductGroup ? data.ProductGroup.GroupName : "";
    fullText += data.ProductCategory
        ? data.ProductCategory.CategoryName
        : "";
    fullText += data.ProductName;
    fullText += data.Description;
    fullText += data.UnitType ? data.UnitType.Name : "";
    fullText += data.IsActive ? "Aktif" : "Taslak";

    return (fullText as any).toLocaleLowerCase("tr").indexOf(filter) >= 0;
}

    applyFilter(filterValue: string) {
        if (this.dataSource) {
            this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
            if (this.dataSource.paginator) {
                this.dataSource.paginator.firstPage();
            }
        }
    }