API is returning response as expected. But for some reason, suggestions are not displayed in the dropdown. No errors or warnings in the console and just freezing the screen.
Spent countless hours trying to debug but realized another pair of eyes will help. Any help will be appreciated.
HTML Code:
<input id="cust-typeahead-prevent-manual-entry" type="text" [ngClass]="[custSearchingYn == 'Y' ? 'form-control form-control-sm typeahead-loading' : 'form-control form-control-sm']"
[(ngModel)]="search.custModel" [inputFormatter]="custFormatter" (selectItem)="customerSelected($event)" [showHint]="true"
[resultFormatter]="custFormatter" [editable]='false' [ngbTypeahead]="searchCust" placeholder="Customer Search" />
Angular:
searchCust: OperatorFunction<string, readonly Customer[]> = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
tap(() => (this.custSearchingYn = 'Y')),
// switchMap allows returning an observable rather than maps array
switchMap((searchCustStr) => searchCustStr.length <= 3 ? [] :this.custService.searchCustomers('QUOTE_SEARCH',
searchCustStr).
pipe(
tap(() => (
this.custSearcFailed = false)),
catchError(() => {
this.custSearcFailed = true;
console.log('Error:');
return of([]);
}),
),
),
tap(() => (this.custSearchingYn = 'N'))
);
API Call:
searchCustomers(searchContext:string, searchStr: string): Observable<Customer[]> {
return this.http.get<Customer[]>(`${environment.apiUrl}/api/customer/list/` + searchContext + `/` + searchStr)
.pipe(map((response) => {
console.log(JSON.stringify(response));
return response}));
}
