I am currently trying to implement a similar functionality to the example provided at this link in my Angular frontend application.
The goal is to send a GET request to my backend with the search parameter obtained from an input field. However, even though the GET call is successfully triggered upon typing, the parameter being sent is always an empty string.
Below is a snippet of my code:
app.component.ts:
export class AppComponent implements AfterViewInit {
searchBox = null;
autoComplete = null;
constructor(private apiService: ApiService) { }
ngAfterViewInit(): void {
this.searchBox = document.getElementById('searchBox');
this.autoComplete = fromEvent(this.searchBox, 'input').pipe(
map((e: KeyboardEvent) => (<HTMLTextAreaElement>e.target).value),
filter(text => text.length > 2),
debounceTime(250),
distinctUntilChanged(),
switchMap(s => this.apiService.autoComplete(s))
);
}
}
app.component.html:
<div>
<input type="text" id="searchBox">
<pre>
{{autoComplete | async | json}}
</pre>
</div>
api.service.ts:
export class ApiService {
autoComplete(s: string): Observable<KeyNames[]> {
const params = new HttpParams();
params.append('search', s);
return this.httpClient.get<KeyNames[]>(this.API_URL + '/tags/autoComplete', {params})
.pipe(
catchError(this.handleError('autoComplete', []))
);
}
}
Could anyone assist me in understanding why my autoComplete() function always receives an empty string as the parameter?