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>
