Angular RXJS retry a task based on a value

Question

Ok, so I have a service that checks to see if a particular 3rd party JS plugin has loaded. I want to listen in for when it has entered the DOM, meanwhile it is in an undefined state. How do I do that? So far I have tried using a subject and retrying periodically but I can't get it to work:

$apiReady: Subject<boolean> = new Subject();

RegisterOnNewDocumentLoadedOnDocuViewareAPIReady(reControl: any): any {

            this.$apiReady.asObservable().subscribe((isReady: boolean) => {
                if (isReady) {
                       //Do something
                    return of(isReady);
                }
            })
            let IsreControlInitialized = ThirdPartyAPI.IsInitialized(reControl);
            if (IsreControlInitialized) {
                this.$apiReady.next(true);
            }
        return throwError(false);
    }

Then in the component:

this._apiService.RegisterOnAPIReady(this.elementID).pipe(
                 retryWhen(error => {
                   return error.pipe(delay(2000));  //<---- Doesn't work
              })).subscribe((response: boolean) => {
                if (response) {
                    //Do some stuff
                 }
              });

My intentions were to check if the API element had been loaded, if not retry in 2 seconds but this doesn't work, can anyone help?

Answer 1

Throwing and catching an error until some condition is met is a little counter-intuitive to me.

My approach consists of using the interval operator along with takeUntil operator.

apiReady = new Subject();

interval(2000) // Check every 2s
 .pipe(
  map(() => this.isApiReady())
  takeUntil(this.apiReady)
 )
 .subscribe(isReady => {
  if (isReady) {
   this.apiReady.next();
   this.apiReady.complete();
  }
 })