Use a pipe or service in a "transformItems" function for the "ais-refinement-list" widget

Hi!

I’m using the ais-refinement-list widget for Angular, in an Angular 13 app, with a custom transformItems function. I have declared this function in a component, as in the example, something like:

transformItems(items) {
    return items.map(item => ({
      ...item,
      highlighted: item.highlighted.toUpperCase(),
    }));
  }

And using it as:

<ais-refinement-list attribute="tag_names" [transformItems]="transformItems" ></ais-refinement-list>

And it’s properly working.

But if I change the function to use a custom pipe, for example:

import {StartCasePipe} from "./utilities/start-case.pipe";

@Component({
  selector: "app-search-sidebar-partial",
  templateUrl: "./search-sidebar-partial.component.html",
})
export class SearchSidebarPartialComponent {

constructor(private startCase: StartCasePipe) { }

transformItems(items) {
    return items.map(item => ({
      ...item,
      highlighted: this.startCase.transform(item.highlighted),
    }));
  }
}

It’s not working because this is undefined.

The custom pipe is like:

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

@Pipe({name: 'startCase'})
export class StartCasePipe implements PipeTransform {
    transform(value: string): string {
        return _.startCase(value);
    }
}

And it’s provided in the app.module.ts file, like (this is a simplification of the file):

[...]
import {StartCasePipe} from "./utilities/start-case.pipe";

@NgModule({
  declarations: [
     [...]
  ],
  imports: [
    [...]
  ],
  providers: [
    [...],
    StartCasePipe
  ],
  exports: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor( ) {  }
}

I’ve also tried to use a service, injecting it in the constructor of SearchSidebarPartialComponent, but I’m getting the same error, that this is not defined.

Am I missing something?

Thanks!