angular / angular/components

Angular Material, Autocomplete loading indicator and showing text (no results found)

Open
#18,478 4 comments 0 reactions 0 assignees View on GitHub
area: material/autocomplete docs help wanted P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Feature Description

I need to show loading when searching for data and also show text when no record is found.
I have the following html excerpt:
```html

arrow_drop_down






{{
index !== to.filterKeys.length - 1
? value[ky] + ' - '
: value[ky]
}}


{{ value }}


```

Component.ts code:
```javascript
ngOnInit(): void {
super.ngOnInit();

this._unsubscribeAll = new Subject();
this.isLoading = false;

this.result$ = this.formControl.valueChanges.pipe(
takeUntil(this._unsubscribeAll),
debounceTime(300),
startWith(''),
tap(() => {
this.isLoading = true
}),
switchMap(term => this.to.filter(term))
);
}
```

for loading, I would control it with the `tap()` method, but my problem is how to know that the request inside `switchMap(term => this.to.filter(term))` was finished, so I set the loading variable to false?

my second problem is how to show a registration message not found, when the server returns an empty array, because I am working with async.

Contributor guide

Open the contributing guide

Research direction

Start from the supplied Angular template and the ngOnInit valueChanges pipeline, then review the Angular Material autocomplete documentation and related examples. Done means the autocomplete visibly indicates an in-flight search and displays a no-results message when the asynchronous result is empty; no repository file or test is named.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.