I'm using RxJs for type along search, I setup an observable to emit a value after 1 second so it behaves like http with delay. I subscribe to it via the async operator in the template, the component has a switchMap to watch the searchTerm observable. Is this how typealong search should be implemented with RxJS?

I've included commented code of how I'd use http, is that how the http observable should be used?

Search Service:

searchTerm(term: string): Observable<Array<ObjectDefinition>> {

   return this.http.get('http://localhost:8080/api/search?term=abc')
            map(result => {
              return result['body'];

   let observer = new Observable<Array<ObjectDefinition>>((subscription) =>    {

      const timer$ = timer(1000);

      timer$.subscribe(() => {
         console.log('timer 1 second');


   return observer;


Testing data:

objectDefinitions = [
    new ObjectDefinition({ name: 'Sydney', description: 'Largest city in Australia'}),
    new ObjectDefinition({ name: 'Melbourne', description: 'City in south of Australia in VIC'}),
    new ObjectDefinition({ name: 'Brisbane', description: 'East coast'}),
    new ObjectDefinition({ name: 'Perth', description: 'West coast'}),
    new ObjectDefinition({ name: 'Adelaide', description: 'Small city in south Australian region'})

Component consumer:

searchInput = new FormControl();

constructor(private definitionService: DefinitionService) {
   this.definitions = this.searchInput.valueChanges
                         tap(value => console.log('input')),
                         switchMap(value => this.definitionService.searchTerm(value))

Template using async pipe to subscribe:

<input class="format-input-button"

<div class="format-options">
  <div *ngFor="let definition of definitions | async" class="search-result">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.