Angular RxJS - Need to Wait until Subscribe has finished in other method

Question

@Component({
  selector: 'note-consultant',
  template: '<div>
    <div>{{patientInformation}}</div>
    <textarea #textElemRef></textarea>
    <button (click)="onSave()">Done</button>
    </div>'
})
export class NoteConsultantComponent implements OnInit, AfterViewInit { 
    recentResponse:any;
    patientInformation:any;
    @ViewChild('textElemRef') textElemRef: ElementRef;

    ngAfterViewInit(): void {
    fromEvent(this.textElemRef.nativeElement, 'keyup').pipe(
      map((event: any) => {
        return event.target.value;
      })
      ,debounceTime(1000)
    ).subscribe((text: string) => {

      let request = this.buildRequestItem(text);
        this.patientService.saveProblemNotes(request).subscribe((resp: any) => {
            if (resp.error) {
              console.log(resp.error);
              return;
            }

            //update response in temp variable...
            this.recentResponse = resp.problemText;
            }
        });
    }
    onSave() {
       if (this.recentResponse != null) {    
       //when clicking save button update DOM
       this.patientInformation = this.recentResponse;
     }

      //Reset temp variable
      this.recentResponse = null;
    }
}

I have a scenario when the user types text I have to hit API and save the typed data. As it will be inefficient to hit API for every keystroke. so I have used 'fromEvent' RxJs operator to debounce for a second.

The thing is that I can't update HTML(because I have simplified the HTML here but in my project its a collapsible panel, it will cause few HTML elements to disappear which I don't want) as I type data So that's the reason I store the response in a temporary variable 'recentResponse' and upon clicking Save button I update HTML.

But the problem here is if user types very fast and clicks Save button, it takes few seconds until Subscribe is finished, until then 'recentResponse' is undefined thus 'patientInformation' never gets updates(so does HTML).

How can I wait until Subscribe is finished inside onSave()? I need to wait until 'recentResponse' has some response.

you can use the RxJs delay operator [Delay](https://www.learnrxjs.io/learn-rxjs/operators/utility/delay) that's one of the common use cases for this operator, and the example is for something similar — rmjoia, Feb 07 '20 at 10:21
Check out the [SwithMap operator](https://blog.angular-university.io/rxjs-higher-order-mapping/) — rmjoia, Feb 07 '20 at 10:36

score 1 · Answer 1 · answered Feb 07 '20 at 10:21

1

You could bind to the keyup event, and use javascript timeout to defer the execution until the typing has stopped.

html

<input type="text" (keyup)="onKeyUp($event)" />

typescript

timeout: number;

onKeyUp(event): void {
  if (this.timeout) {
    window.clearTimeout(this.timeout);
  }

  this.timeout = window.setTimeout(() => {
    // TODO: process key up here
  }, 500);
}

answered Feb 07 '20 at 10:21

Kurt Hamilton

12,490
1
24
40

The OP is asking about how to use RxJs and how to wait using it... is your answer using RxJs? – rmjoia Feb 07 '20 at 10:23
The last 2 paragraphs of the OP describe the problem more generally. rxjs methods are one way of solving the problem. setTimeout is another way of solving the problem. Just because rxjs is going to be used at some point, it doesn't make it specifically an rxjs problem. – Kurt Hamilton Feb 07 '20 at 10:26

score 1 · Answer 2 · answered Feb 07 '20 at 10:34

I would suggest not to call API on events like keyup, keydown, keypress etc., It will hit the server on every key press, Instead add blur event.

To answer your question

Method 1 - Prevent button click Just disable button until API is completed.

fromEvent().subscribe(() => {
 disableBtn = true;
 this.patientService.saveProblemNotes(request).subscribe(() => {
  disableBtn = false; 
 })
})

Method 2 - Observable Wrap you API function in observable and listen for observable complete in onSave function

myApi() {
 new Observable(observer => {
  this.patientService.saveProblemNotes(request).subscribe(() => {
   observer.next();
  });
 });
}

onSave() {
 this.myApi.subscribe(() => {
  //Api is completed
 })
}

Angular RxJS - Need to Wait until Subscribe has finished in other method

2 Answers2