css - How to show progress in a search input using angular material?

Question

I created an application which contains material input for search purpose. I would like the horizontal line of the input field to have progress indicator, when search is in progress. My idea is to show and hide progressBar with *ngIf and move it with css to match te input horizontal line height. Here is the code:

<mat-form-field>
   <mat-label>Search</mat-label>
   <input matInput (input)="onSearchChange($event.target.value)">
   <mat-progress-bar *ngIf="searchDone" style="top:9px" [color]='color' mode="query"></mat-progress-bar>
</mat-form-field>

I dont think it is the best solution, because I see the input horizontal line under the progressbar. Is there any solution that makes the input horizontal line to show progress by itself?

question from:https://stackoverflow.com/questions/65901359/how-to-show-progress-in-a-search-input-using-angular-material

Answer 1

As one possible solution you can start using the lib NgxMatSelectSearch.

The Api has an input option searching to display an indicator while searching.

See the example Stackblitz and try to search in "Server side search" input.