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

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?

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.

Answer 2

You can position the progress bar over the form field with a template like this:
<div class="container">
<mat-form-field appearance="fill">
<textarea matInput [(ngModel)]="message" [matTextareaAutosize]="true" [matAutosizeMinRows]="1" [placeholder]="placeholder"></textarea>
<button (click)="create()" mat-icon-button matSuffix matTooltip="Send" [disabled]="creating">
<mat-icon>send</mat-icon>
</button>
</mat-form-field>
<mat-progress-bar mode="indeterminate" *ngIf="creating"></mat-progress-bar>
</div>
and css like this:
.container {
position: relative;
}
mat-progress-bar {
position: absolute;
bottom: 16px;
}