how to place spinner in angular - html

Question

I just start working on existing code and my task is to place a spinner in auto completion but not sure where exactly to put isLoading = true and isLoading = false in my Typescript. I tried to put all over the place but some reason the spinner icon is still not showing when I try to search some data that store in the backend.
It kinda look like this project https://stackblitz.com/edit/angular-material-autocomplete-async2 and I tried to copy but the spinner icon is still not showing in my project when I start typing. any suggestion or help? thanks
isLoading = false;
#Input() set workspace(ws: Workspace) {
this._workspace = ws;
if (ws && ws.tags) {
this.superTags = ws.tags.filter(tag => {
return tag.type == 1;
});
}
}
constructor(private tagService: TagService) {
this.mapper();
}
ngOnInit(): void {
this.tagService.getAllTagsByType('super').subscribe((superTags) => {
if (superTags)
this.allsuperTags = superTags;
this.allsuperTags.forEach(superTag => {
this.allSuperTagNames.push(superTag.tag);
});
})
}
private _filter(value: string): String[] {
if (value.length > 0) {
const filterValue = value.toLowerCase();
return this.allSuperTagNames.filter(tag => tag.toLowerCase().indexOf(filterValue) === 0);
}
}
add(event: MatChipInputEvent, event1: MatAutocompleteSelectedEvent): void {
const input = event.input;
const value = event.value;
if (event1 === null) {
input == event.input;
value == event.value;
}
else {
input == event1.option.value;
value == event1.option.value;
}
if ((value || '').trim()) {
if (this.allSuperTagNames.find((f) => f.toLowerCase() === value.toLowerCase()) && !this.superTags.find((f) => f.tag.toLowerCase() === value.toLowerCase()))
{
this.superTags.push({ tag: value.trim().toLowerCase(), type: TagType.super });
this.tagService.addTag(this._workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
this.snackbar.open(input.value + " has been added as super tag.", " ", { duration: 2500 });
}
}
// Reset the input value
if (input) {
input.value = '';
}
this.tagCtrl.setValue(null);
}
mapper() {
this.filteredSuperTags = this.tagCtrl.valueChanges.pipe(
startWith(null),
map((tag: string | null) => tag ? this._filter(tag) : this.allSuperTagNames.slice()));
}
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngIf="isLoading" class="is-Loading">
<mat-spinner diameter="20"></mat-spinner>
</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
{{tag}}
</mat-option>
</ng-container>
</mat-autocomplete>

Answer 1

It seems like the code which you added only doing the synchronous operation. Even though you subscribed to the form-control, the tags are being filtered locally from pre-loaded data, and the time taken will be very little. To really show the spinner, you may either need to call an API or add some delay to mock the filter method as observable as shown in this example
How can I create an observable with a delay
This way you can show the spinner during that delay.