<input list="dataUsers" formControlName="user" placeholder="Type the user name" class="form-control form-control-lg" type="text" (ngModelChange)="doSearch($event)"/>
<datalist id="dataUsers">
<option *ngFor="let u of users$ | async" [value]="u">
{{u}}
</option>
</datalist>
the .ts file:
users$: Observable<string[]> = this.searchUser$.pipe(
debounceTime(500),
switchMap(searchUserText =>{
return this._service.search(searchUserText)
}),
map((info: string[])=>{
return info
})
searchUser$ = new BehaviorSubject<string>('')
doSearch($event: any){
this.searchUser$.next($event)
}
As mentioned in the title, I am looking to implement a loading spinner to indicate progress until the data from users$ is fetched from the API.
I initially considered using Angular Material for this, but due to compatibility issues with my current dependencies, I had to explore other options.