Angular2 form control valueChanges observable complete never called

Question

I'm currently trying to show a simple loader on my search bar while the searching is taking place. I have planned to set a variable in the subscribe callback on the valueChanges observable from my form control to a value "loading", and to set it to an empty string in the complete callback. However, the complete callback is never called.

I have also tried adding a callback to finally on the observable, but it is also never called.

My code:

searchBox: Control = new Control();
loadingClass: string = "";

constructor() {
    this.searchBox.valueChanges
            .debounceTime(400)
            .distinctUntilChanged()
            .subscribe((text: string) => {
                this.imageSearch = text;
                this.loadingClass = "loading";
            }, (err: Error) => {
                console.log(err);
            }, () => {
                this.loadingClass = "";
                console.log("test");
            });
}

Answer 1

It's normal since the observable is never completed. The valueChanges allows you to receive value from your search box. In fact, you want to be notified when the search action is complete.

So I would try something like that, assuming that the searchImage actually does the search and return an observable:

constructor() {
  this.searchBox.valueChanges
              .debounceTime(400)
              .distinctUntilChanged()
              .flatMap((text:string) => { // <-------
                this.loadingClass = "loading";
                return this.searchImage(text);
              })
              .subscribe((searchResult) => {
                  this.imageSearch = searchResult;
                  this.loadingClass = ""; // <----
              }, (err: Error) => {
                  console.log(err);
              });
}

See this article for the use of the flatMap operator:

• https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html