Debounce time included

search-bar.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { switchMap, debounceTime } from 'rxjs/operators';
import { PlanetService } from '../planet.service';
import { Planet } from '../planet';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html'
})
export class SearchBarComponent implements OnInit {
  planets$: Observable<Planet[]>;
  search = new FormControl();

  constructor(private service: PlanetService) {}

  ngOnInit() {
    this.planets$ = this.search.valueChanges.pipe(
      debounceTime(250),
      switchMap<string, Planet[]>(value => this.service.search(value))
    );
  }
}