Run Method on FormControl's valueChanges Event

Question

I have the following code for an Angular 2 type-ahead component:

this.question["input"] = new FormControl();
this.question["input"].valueChanges
        .debounceTime(400)
        .switchMap(term => this.question['callback'](term))
        .subscribe(
            data => {
                this.question["options"].length = 0;
                this.question["options"].push(...data);
            }
        );

Which is working great, however I am Attempting to add a loading animation to this event, i.e. an animation starts when the FormControl's value changes, and ends when the data is returned.

With this said is there a way to tap into this method chain with code such as the following?

...
    .valueChanges
    /* Start Animation or Run Custom Function Here */
    .switchMap(term => /* Run AJAX Here */)
    .subscribe(
        data => {
            /* End Animation Here */
        }
    );
...

Any assistance is appreciated.

score 2 · Answer 1 · answered Sep 24 '16 at 13:26

2

This has not been tested, but it is similar to code I've used in my app... Hope it helps:

this.question["input"] = new FormControl();
this.question["input"].valueChanges
  .debounceTime(400)
  .switchMap(term => this.question['callback'](term))
  .subscribe(
     data => {
        this.question["options"].length = 0;
        this.question["options"].push(...data);
        this.startAnimation();
     },
     () => {this.completeAnimation()}
  );

startAnimation() {
   //start animation code here
}

completeAnimation() {
   //complete the animation here.
}

answered Sep 24 '16 at 13:26

John Baird

2,606
1
14
33

Thank you for the input, however this is not what I am looking for. In your code the `this.startAnimation();` will only be triggered **after the AJAX call has returned data**, and it will end once the code in the `data => { ... }` block has run. – P. Moloney Sep 26 '16 at 06:40
With this said, it is probably best to have the `this.completeAnimation()` in the always function- `() => { ... }` as you have done, so that the animation will end even if the AJAX call fails. – P. Moloney Sep 26 '16 at 06:44
Yes, that will work, but again is not ideal, as this may well not be the only component/service using that http request and the others won't have the same animation if they require an animation at all. I will create a separate http service with an animation as a work-around, but I will continue to look for an answer to this question... Thanks again. – P. Moloney Sep 26 '16 at 10:48

score 0 · Accepted Answer · answered Sep 27 '16 at 08:48

As it turns out this is really easy... To add custom code into the switch map you can simply do the following.

this.question["input"] = new FormControl();
this.question["input"].valueChanges
    .debounceTime(400)
    .switchMap(term => {
        // custom code can go here.
        this.customAnimationStart();
        return this.question['callback'](term);
    })
    .subscribe(
        data => {
            this.question["options"].length = 0;
            this.question["options"].push(...data);
        },
        failed => console.error("Request Failed", failed),
        () => this.customAnimationEnd()
    );

The trick that caught me up with this attempt was to return the request after your function(s).

Run Method on FormControl's valueChanges Event

2 Answers2