Regression: ngModel doesn't work with search function bind(this) ([ngbTypeahead]="search.bind(this)")

Bug description:

In case if I use search.bind(this) ngModel isn’t working, data isn’t set to model

html:

<input
 id="typeahead-basic"
  type="text"
   [ngbTypeahead]="search.bind(this)"
   class="form-control"
   [(ngModel)]="model"/>

ts:

search(text$: Observable<string>) {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : this.states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    )
  }

This was working on v/7.0.0

Link to minimally-working StackBlitz that reproduces the issue:

https://angular-dd3z93.stackblitz.io

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 11.2.7

ng-bootstrap: 9.1.0

Bootstrap:

[lschuft]

@KyleThenTR To keep things short, my scenario consisted on a table with rows rendered via a ngFor. Each row had a typeahead. I passed a parameter to each typeahead to allow them to know which row they corresponded to. To avoid passing a parameter, I simply encapsulated each row into its own Component. That way, the parameter became one of the Input properties of this new Component, so there was no need to use a parameter in the typeahead function; simple grab that information from the Component itself.

[icyerasor]

The proposed workaround is to use a pure pipe. It’s really suuuuper easy:

1. create the pure pipe

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


@Pipe({
  name: 'applyPure',
  pure: true, // thats important
})
export class ApplyPurePipe implements PipeTransform {
  public transform(templateValue: any, fnReference: Function, ...fnArguments: any[]): any {
    // join the inputs from both sides of the function ref
    fnArguments.unshift(templateValue);

    return fnReference.apply(null, fnArguments);
  }
}

1. use it where you need it like this:

[ngbTypeahead]="'PARAM' | applyPure: typeaheadFunction"

with your typeaheadFunction being something along the lines of

  typeaheadFunction: (param: string) => OperatorFunction<string, readonly Result[]> = (
    param: string,
  ) => (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((textTyped) =>
        typedText.length < 2 ? [] : this.searchService.search(param, textTyped),
      ),
    );
  };

really not sure if I’m a fan 🤔