Angular template not updating on RxJS Observable change

Question

I work on a web application that contains an input field as a search. Its values are being given to a Subject that returns an Observable with an array of data. This data is rendered in a template. All of this works . What does not, is to hide the result-section of the template when there aren't any results. Corresponding code sections:

  private querySubject = new Subject<string>();
  ...
  public searchResult: Observable<XyzDTO[]> = this.querySubject.pipe(
    debounceTime(250),
    distinctUntilChanged(),
    switchMap((queryText) => {
      if (queryText.length > 2) {
        return from([this.xyzService.search(queryText)]);
      } else {
        return from([]);
      }
    })
  );

<ng-container *ngIf="searchResult | async as results">
  Results: {{results.length}}
    <mat-card *ngFor="let result of results" class="m-2" (click)="goToDetails(result.id)">
    ...

Having entered more than 2 characters makes the results appear as expected. However, reducing the number of characters back to 2 or less doesn't change the view. Debugging shows that return from([]); is being called. Any idea why the template doesn't update properly? Thanks!

Answer 1

You have wrong return type with characters length <= 2. Use of instead to from .

else {
        return of([]);
      }