Observing an observable in RXJS when dealing with a potentially undefined object

Question

Observing an observable in RXJS when dealing with a potentially undefined object

I'm trying to figure out how to combineLatest of two sources, one of which may be undefined. Here's what I have:

const observable1 = interval(100);
const observable2 = this.ref?.observable; // a reference that may not exist until the future

combineLatest([observable1, observable2]).subscribe(...)

The issue is I want the output observable to subscribe to this.ref.observable as soon as this.ref is defined (but I can't predict when that will happen).

This is what I've attempted...

observable1.pipe(
   startWith(of(true)),
   switchMap((_) => interval(10)),
   skipWhile((_) => !this.ref),
   switchMap((_) => observable1),
   combineLatestWith(this.ref?.observable ?? EMPTY),
)
.subscribe((val1, val2]) => {...})

However, I encountered TypeScript errors regarding the types returned from combineLatestWith and it feels like an overly complex solution for a seemingly simple problem!

I'm wondering if there's a simpler approach to receiving emissions from a source observable when the object the source observable relies on might be undefined at the time I aim to start observing?

javascript angular typescript rxjs

Answer 1

Answer №1

Start by initializing a BehaviorSubject with a value of null.

mySubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

Next, in the component's ngOnInit or constructor, subscribe to changes in the BehaviorSubject.

ngOnInit() {
    this.mySubject.pipe(
       startWith(of(true)),
       switchMap((_) => interval(10)),
       skipWhile((_) => !this.ref),
       switchMap((_) => observable1),
       combineLatestWith(this.ref?.observable ?? EMPTY),
    )
    .subscribe((val1, val2]) => {...})
}

The view child typically becomes visible during ngAfterViewInit.

ngAfterViewInit() {
    if (this.viewChild?.nativeElement) {
        this.mySubject.next(this.viewChild.nativeElement);
    }
}

Answer 2

Start by initializing a BehaviorSubject with a value of null.

mySubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

Next, in the component's ngOnInit or constructor, subscribe to changes in the BehaviorSubject.

ngOnInit() {
    this.mySubject.pipe(
       startWith(of(true)),
       switchMap((_) => interval(10)),
       skipWhile((_) => !this.ref),
       switchMap((_) => observable1),
       combineLatestWith(this.ref?.observable ?? EMPTY),
    )
    .subscribe((val1, val2]) => {...})
}

The view child typically becomes visible during ngAfterViewInit.

ngAfterViewInit() {
    if (this.viewChild?.nativeElement) {
        this.mySubject.next(this.viewChild.nativeElement);
    }
}

Answer 3

Answer №2

Here is the Solution to Address Your Issue

import { CommonModule } from '@angular/common';
import {
  AfterViewInit,
  Component,
  OnDestroy,
  OnInit,
  QueryList,
  ViewChildren,
} from '@angular/core';
import { Subject, combineLatest, interval, takeUntil } from 'rxjs';
import { Site3Child1Component } from './site-3-child-1/site-3-child-1.component';

@Component({
  selector: 'app-site-3',
  standalone: true,
  template: `
   <p>site-3 works!</p>
   <ng-container *ngIf="showChild1">
     <app-site-3-child-1 #child1 />
   </ng-container>`,
  styleUrl: './site-3.component.css',
  imports: [Site3Child1Component, CommonModule],
})
export class Site3Component implements OnInit, AfterViewInit, OnDestroy {
  @ViewChildren('child1') children?: QueryList<Site3Child1Component>;

  protected showChild1 = false;

  private observable1 = interval(1000);

  private destroy$ = new Subject();

  ngOnInit(): void {
    setTimeout(() => {
      this.showChild1 = true;
    }, 2000);
  }

  ngAfterViewInit(): void {
    this.children?.changes
      .pipe(takeUntil(this.destroy$))
      .subscribe((children: QueryList<Site3Child1Component>) => {
        const child1 = children.first;
        if (child1) {
          console.log('child1 is now accessible');
          combineLatest([this.observable1, child1.observable])
            .pipe(takeUntil(this.destroy$))
            .subscribe(([observable1, child1Value]) => {
              console.log(observable1, child1Value);
            });
        }
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next(true);
  }
}

//child

import { Component } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-site-3-child-1',
  standalone: true,
  imports: [],
  templateUrl: './site-3-child-1.component.html',
  styleUrl: './site-3-child-1.component.css',
})
export class Site3Child1Component {
  public observable = interval(3000);
}

Answer 4

Here is the Solution to Address Your Issue

import { CommonModule } from '@angular/common';
import {
  AfterViewInit,
  Component,
  OnDestroy,
  OnInit,
  QueryList,
  ViewChildren,
} from '@angular/core';
import { Subject, combineLatest, interval, takeUntil } from 'rxjs';
import { Site3Child1Component } from './site-3-child-1/site-3-child-1.component';

@Component({
  selector: 'app-site-3',
  standalone: true,
  template: `
   <p>site-3 works!</p>
   <ng-container *ngIf="showChild1">
     <app-site-3-child-1 #child1 />
   </ng-container>`,
  styleUrl: './site-3.component.css',
  imports: [Site3Child1Component, CommonModule],
})
export class Site3Component implements OnInit, AfterViewInit, OnDestroy {
  @ViewChildren('child1') children?: QueryList<Site3Child1Component>;

  protected showChild1 = false;

  private observable1 = interval(1000);

  private destroy$ = new Subject();

  ngOnInit(): void {
    setTimeout(() => {
      this.showChild1 = true;
    }, 2000);
  }

  ngAfterViewInit(): void {
    this.children?.changes
      .pipe(takeUntil(this.destroy$))
      .subscribe((children: QueryList<Site3Child1Component>) => {
        const child1 = children.first;
        if (child1) {
          console.log('child1 is now accessible');
          combineLatest([this.observable1, child1.observable])
            .pipe(takeUntil(this.destroy$))
            .subscribe(([observable1, child1Value]) => {
              console.log(observable1, child1Value);
            });
        }
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next(true);
  }
}

//child

import { Component } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-site-3-child-1',
  standalone: true,
  imports: [],
  templateUrl: './site-3-child-1.component.html',
  styleUrl: './site-3-child-1.component.css',
})
export class Site3Child1Component {
  public observable = interval(3000);
}

Observing an observable in RXJS when dealing with a potentially undefined object

Answer №1

Answer №2

Similar questions

Retrieving HTML content from Wikipedia's API using JavaScript

The issue with Angular is that it fails to render the object contained within an

Insert a fresh row into the gridview using JavaScript

What is the best way to ensure the secure signing of a transaction in my Solana decentralized application (

Display the component only if the image source is legitimate

Having trouble converting customized tabs into Bootstrap navigation tabs?

Enabling communication between App.js and a separate class in React

Unable to include a class when the Hover feature is active

An issue occurred when trying to trigger a click event within a Blazor WebAssembly

Determine the value of an array element based on a specified

What steps are needed to enable autocomplete for input fields in React Native Elements on iOS?

Unable to inject a service into an Angular unit test

The integration of Meteor.js with an external Mongo database is causing issues with logging in to Mongo

Error: The index $_GET[...] is not defined

How to Retrieve the Current div's ID in VueJS

Adjusting the background color of the list item

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

Obtain the current status of a Stripe charge made with a specific source token using Node.js and

Switch up your Vue filters with ease

Looking for guidance on how to deploy a Node server with TypeScript on Vercel