Xtykutl

I am very new in Angualar and I am following this official Angular tutorial: https://angular.io/tutorial/toh-pt6

and I have some doubts about how it works, this is my commented code of the HeroSearchComponent class:

import { Component, OnInit } from '@angular/core';



import { Observable, Subject } from 'rxjs';



import {

   debounceTime, distinctUntilChanged, switchMap

 } from 'rxjs/operators';



import { Hero } from '../hero';

import { HeroService } from '../hero.service';



@Component({

  selector: 'app-hero-search',

  templateUrl: './hero-search.component.html',

  styleUrls: [ './hero-search.component.css' ]

})

export class HeroSearchComponent implements OnInit {



  // It is an Observable emitting an array of Hero objects:

  heroes$: Observable<Hero>;



  /**

   * The searchTerms property is declared as an RxJS Subject.

   * A Subject is both a source of observable values and an Observable itself. 

   * You can subscribe to a Subject as you would any Observable.

   * You can also push values into that Observable by calling its next(value) method as the search() method does.

   */

  private searchTerms = new Subject<string>();



  constructor(private heroService: HeroService) {}



  /**

   * Push a search term into the observable stream.

   * Every time the user types in the textbox, the binding calls search() with the textbox value, a "search term". 

   * The searchTerms becomes an Observable emitting a steady stream of search terms. 

   */ 

  search(term: string): void {

    this.searchTerms.next(term);

  }



  ngOnInit(): void {

    this.heroes$ = this.searchTerms.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((term: string) => this.heroService.searchHeroes(term)),

    );

  }

}

This class is used to search the heros from the hero-search.component.html containing:

<div id="search-component">

  <h4>Hero Search</h4>



  <!--

    As the user types in the search box, a keyup event binding calls 

    the component's search() method with the new search box value

  -->

  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />



  <ul class="search-result">

    <!--

        The *ngFor iterates over a list called heroes$, not heroes.

        The $ is a convention that indicates heroes$ is an Observable, not an array.

        The *ngFor can't do anything with an Observable. 

        But there's also a pipe character (|) followed by async, which identifies Angular's AsyncPipe.

        The AsyncPipe subscribes to an Observable automatically so you 

        won't have to do so in the component class.

    -->

    <li *ngFor="let hero of heroes$ | async" >

      <a routerLink="/detail/{{hero.id}}">

        {{hero.name}}

      </a>

    </li>

  </ul>

</div>

Here my interpretation, I am absolutly not sure if it is correct or not.

The heroes$ field of the HeroSearchComponent is not an array but it is an Observable emitting an array. This because we live in an asyncronous world so we have to wait that the server provide the response.

In the view I can't directly iterate on an array but I have to wait that I receive the response (when the previous Observable emit the array of Hero), this is done using the asyncornous pipe to register on this event:

<li *ngFor="let hero of heroes$ | async" >

This should be correct...

Then into the view I have:

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

When the user insert a new character into the input tag it is called the component search() method passing the value inserted into the input tag ("a", "ab", "abc", "ab", etcetc).

This is the search() method:

search(term: string): void {

  this.searchTerms.next(term);

}

Looking at it is not directly performing a search calling a backend service but it is pushing the received new term into the searchTerms.

This searchTerms object is a Subject. From what I have understood a Subject is an object that can emit event (as an Observable**) and at the same time can receive a stream of evens (in this case a stream of terms eacht time that the user insert a new char into the view search input).

But...how and where it is performed the call to obtain the heroes list matching with the inserted term?

My idea is the following one: it is not directly do in this method but there is something like a pre-setted behavior. This is done when this class is instanced by the ngOnInit() method:

ngOnInit(): void {

  this.heroes$ = this.searchTerms.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((term: string) => this.heroService.searchHeroes(term)),

  );

}

That basically says something like: call the heroService.searchHeroes(term) method (the method that perform the search on my backend) passing the term each time that the searchTerms receiveemit an event (that is the last term to search). In theory this pipe is setted to do it not for every char inserted but every 300ms to avoid to perform much call).

I am not sure about this mechanism and how exactly this pipe works.

What is the correct and complete interpretation?