Angular 5, Implementing a Search Input

Question

I am trying to follow this example

but I am not finding why it doesn't work. Here is my code

import { Subject } from "rxjs/Subject";
import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import {
  SearchFullText,
  SearchFullTextService,
} from "../search-full-text.service";
import { debounceTime, distinctUntilChanged, switchMap } from "rxjs/operators";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
      persons$: Observable<SearchFullText[]>;
      private searchValues = new Subject<string>();

  constructor(private searchService: SearchFullTextService) {}
  // Push a search term into the observable stream.
  search(searchValue: string): void {
    this.searchValues.next(searchValue);
  }

  ngOnInit(): void {
    this.persons$ = this.searchValues.pipe(
      // wait 300ms after each keystroke before considering the term
      debounceTime(300),

      // ignore new term if same as previous term
      distinctUntilChanged(),

      // switch to new search observable each time the term changes
      switchMap((searchValue: string) => {
        console.log("switchMap");
        return this.searchService.searchFullText(searchValue)
     })
    );
  }
}

switchMap is not executing. What am I missing?

Where do you subscribe to the observable? Usually this has to happen either by using the AsyncPipe in the template, or programatically by calling .subscribe on the Observable. — Philipp Meissner
– Philipp Meissner, Commented Apr 16, 2021 at 10:41

Pieter De Bie · Accepted Answer · 2021-04-16 11:08:40Z

1

The problem is that you don't subscribe to your switchMap observable.If you subscribe to it your code will execute:

switchMap((searchValue: string) => {
    console.log("switchMap");
    return this.searchService.searchFullText(searchValue)
}).subscribe(value => doSomething);

answered Apr 16, 2021 at 11:08

Pieter De Bie

1,25615 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5, Implementing a Search Input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related