CODEWITHSUNDEEP
angularsearch
user08
user08

Reputation: 735

Angular 5, Implementing a Search Input

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?

Upvotes: 0

Views: 367

Answers (1)

Pieter De Bie
Pieter De Bie

Reputation: 1212

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);

Upvotes: 1

Related Questions