Using this script, I have successfully implemented the addition of <mat-option> tags:
HTML
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
<mat-option (onSelectionChange)="onEnter($event)" *ngFor="let data of technologies" [value]="data.technology">
<span matBadge="{{data.counter}}" matBadgeOverlap="false">{{data.technology}} </span>
</mat-option>
</mat-autocomplete>
TS
// When a key is pressed, display technologies
onKeyUp(event: any): void {
if (event.target.value.trim().length > 0) {
this.technologiesService.getTechnologies(event.target.value)
.subscribe(data => {
if (JSON.stringify(this.technologies) !== JSON.stringify(data)) {
this.technologies = data;
}
});
}
The issue at hand
Upon pressing a key, a list of options is displayed. Subsequent key presses result in the same list (array technologies) being shown briefly before disappearing and being replaced by the new list after about one second.
It may be due to the time required for the new data to be fetched from the server. How can I ensure that ONLY the new list is displayed without this brief transition?