Using ngbTypeahead to send arguments

Question

Using ngbTypeahead to send arguments

I'm utilizing ngbTypeahead for typeahead search feature, and I'm curious about passing parameters to the search function.

<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search(param1, param2)"/>

Angular

search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  tap(() => (this.searching = true)),
  switchMap(term =>
    this.underwritingServiceWrapper.search(term).pipe(
      tap(() => (this.searchFailed = false)),
      catchError(() => {
        this.searchFailed = true;
        return of([]);
      })
    )
  ),
  tap(() => (this.searching = false))
)

I've tried troubleshooting this, but it doesn't seem to be functioning as expected. Angular 2 ng bootstrap typehead pass additional parameter

Could someone provide an example to help me out?

angular typescript ng-bootstrap typeahead

Answer 1

Answer №1

The input for ngbTypeahead is expected to be a function that accepts an observable of strings as a parameter and returns an observable of arrays of results. In other words, it needs to have a type of

(text: Observable<string>) => Observable<any[]>

as stated in the API documentation.

Your code would work correctly if the search function was designed to take two parameters and return a function that matches the required type:

search(param1: SomeType, param2: SomeOtherType): (text: Observable<string>) => Observable<any[]> {
  return (text$: Observable<string>) => text$.pipe(
    ...
  );
}

However, this is not the case. It seems unclear what you intend to achieve here. Perhaps you just need to incorporate this.param1 and this.param2 within your function:

search = (text$: Observable<string>) =>
  text$.pipe(
    // utilize this.param1 and this.param2 here 
  );

Answer 2

The input for ngbTypeahead is expected to be a function that accepts an observable of strings as a parameter and returns an observable of arrays of results. In other words, it needs to have a type of

(text: Observable<string>) => Observable<any[]>

as stated in the API documentation.

Your code would work correctly if the search function was designed to take two parameters and return a function that matches the required type:

search(param1: SomeType, param2: SomeOtherType): (text: Observable<string>) => Observable<any[]> {
  return (text$: Observable<string>) => text$.pipe(
    ...
  );
}

However, this is not the case. It seems unclear what you intend to achieve here. Perhaps you just need to incorporate this.param1 and this.param2 within your function:

search = (text$: Observable<string>) =>
  text$.pipe(
    // utilize this.param1 and this.param2 here 
  );

Using ngbTypeahead to send arguments

Answer №1

Similar questions

Using private members to create getter and setter in TypeScript

Angular 4: Implementing toggle switch functionality in Angular 4 by binding boolean values retrieved from the database

Feeling perplexed about distinguishing between Modules and Components in Angular 2

Reactjs Promise left hanging in limbo

Ensure the forkjoin operation completes before proceeding with the following code

The window.Print() function is currently experiencing a glitch in Microsoft Edge (Version 91.0.864.59) when trying to use it for the first time within an Angular 12

Saving a JSON object to multiple JSON objects in TypeScript - The ultimate guide

What is the best way to handle success data in React Query?

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Identify the classification of unfamiliar items

Unable to Add Stripe Client in NestJS using (https://www.npmjs.com/package/@golevelup/nestjs-stripe)

React Typescript Mui causing `onBlur` event to trigger with every change occurring

What could be causing React to generate an error when attempting to utilize my custom hook to retrieve data from Firebase using context?

Tips for sending an Angular http post request including both data and an image:

Angular 2: Simplifying the Process of Retrieving a Full Address Using Latitude and Longitude

Angular 2: Executing a function after ngFor has completed

What is the proper way to utilize a custom property that has been incorporated into my Pinia stores in a Typescript project?

Creating a Utils class in Vue.js with seamless access to Vuex through this.$store

The index signature for strings appears to be duplicated in this TypeScript file, causing an

Error: In Angular 4, there is an issue where trying to access the length property of an undefined property results in a