Subscribe to RxJS, but only listen for specific emissions

How can I subscribe to an observable stream and combine values, even if they don't both emit?

Is there a specific RxJs operator that can help achieve this?

// function in a service
getContent(): {
  return CombineLatest({
    list: of([ {...} ]) // always want this to be emitted
    ignore: of( null ), // subscribe but don't care if it's emitted or not.
  }).pipe(
     map(({ list }) => list // always return the list response
  )
}

In my case, I need to stream content from the store and also listen for web socket updates simultaneously within one subscription.

Please note that the ignore stream responds via a tap outside of this example (listening to webSockets for updates), while the list is a stream of content from ngRx store.

Answer №1

Perform a merge operation with a filtering condition

merge(of([ {...} ]), of( null ).pipe(filter(() => false)))

This action will effectively remove all emitted values, ensuring they do not affect the final merge result.

Answer №2

It seems like you are interested in creating an observable that outputs certain data (a$), and you also want to keep a subscription active for another observable (b$) as long as there is a subscription to a$.

You can achieve this functionality with the following approach:

retrieveContent() {
  const dummyB$ = b$.pipe(
    filter(() => false), // filtering out all emissions
    startWith(undefined) // starting with 'undefined'
  );

  return combineLatest([a$, dummyB$]).pipe(([a]) => a);
}

In this solution, we utilize filter to exclude emissions from b$ and use startWith to initially emit undefined. This way, combineLastest will output whenever a$ emits while keeping the subscription to b$ active.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

Confirming that the NGRX Dictionary value is set

After upgrading from Angular 7.1.4 to 8.2.0 and Typescript from 3.1.6 to 3.5.3, I encountered an issue with identification of array items. Prior to the upgrade, TypeScript correctly recognized that the array item was not undefined. However, post-upgrade, ...

Tally of specified time frame

I have a collection of dates presented as follows: [ "2020-08-20", "2020-08-20", "2020-08-21", "2020-08-24", "2020-08-25", "2020-08-25", "2020-08-25", ] and I am in need of segregating ...

Tips on defining the type of a TypeScript interface

Hello wonderful community, I am curious about how to properly define this specific type in Typescript. I have been contemplating whether Generics usage could help achieve this. Especially considering that the key for the object will always be different an ...

How can I confirm that node-fetch is being invoked during a TypeScript unit test?

Hey there! I have a module that exports some methods and I want to test them with unit tests. My project is built on typescript ^3.9.7 and has jest ^26.1.0 and ts-jest ^26.2.0 installed. One of the methods in question requires node-fetch ^2.6.0 to utilize ...

"Encountering a 'No overload matches this call' error while attempting to utilize a Vue Component in TypeScript

While attempting to implement a child component in a TypeScript Vue Component, I encountered the error message "No overload matches this call". Sharing this for the benefit of others, as finding a solution online proved challenging. import {ChildCompone ...

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

FilterService of PrimeNg

Looking for assistance with customizing a property of the p-columnFilter component. I have managed to modify the filter modes and customize the names, but I am having trouble with the no-filter option. Has anyone found a solution for this? this.matchMo ...

Dealing with null-safe operators issues has been a challenge for me, especially while working on my Mac using

Hey everyone! I'm encountering errors when using null sage operators in TypeScript. Can someone help me figure out how to solve this issue? By the way, I'm working on Visual Studio Code for Mac. https://i.stack.imgur.com/huCns.png ...

Typescript issue: Redundant Identifier found across the board

I encountered a problem with my NS NG2 app. Every time I attempt to execute the command tns livesync android --watch, or any other build command, a lengthy list of errors pops up. Here is a snippet of these errors. app/node_modules/typescript/lib/lib.es6.d ...

Error in function due to undefined reference

Within my app.component.ts file, I have a function that is defined as follows: export class AppComponent { .... onRowSelected(record:any) { this.selectedRecord = record; } .... } This function is used in the app.component.html fi ...

creating an implementation of a function within a parent abstract class

Can the implementation of a function be written inside an abstract class? I am planning to create an abstract class for my components to extend in order to share some behaviors. Is it acceptable to include something like this (as shown in the simple examp ...

The Expo React Native project encountered an Android build failure

I have a project that was created using expo 49 and typescript 5.1.3, and now I need to prepare it for submission to Google Play. To achieve this, I followed a series of steps in the VS Code terminal: 1) Ran npm install -g eas-cli 2) Executed eas login ...

What is the reason behind TypeScript not being able to recognize the value from the context wrapper?

I'm currently working on implementing a context wrapper. My goal is to pass the state variables as provider values and then access those values by using useContext in the ToolBar component. type NavContextType = { isDrawerOpen: boolean; setIsD ...

Angular tutorial: Loading Excel file with header located on row n

Is there an easy way to read specific columns from an excel file in Angular, starting from a certain row as the header? Most of the code I found involves complex scripts, and I'm looking for a simpler solution. Below is the code I've come up wit ...

Comparing ngModules and index.tsIn the world of Angular development

Recently, I came across angular seed and noticed that they include both index.ts and modules. It got me thinking about why they use both when they can achieve the same goal of exporting TypeScript types. ...

Can you explain the distinction between a def interface and a dto interface within Angular development?

Currently, I am tasked with continuing a project that was initiated by someone else. Within the model folder, there are two interface files labeled def and dto. However, the distinction between these def and dto interface files is unclear to me. I would gr ...

Ways to allocate a random color within an array?

Hi there, I'm trying to create chips with random colors from an array in my code. I attempted to use a color string array and assign them to the chips one after the other, but it didn't work as expected. Any suggestions on how I can achieve this? ...

Change rem into a whole number

How can I convert a rem value to an integer? The code snippet this.props.viewTitleContainerStyle.paddingTop returns a value of 1.00rem in the debugger. The viewTitleContainerStyle is stored as theme.sizes.Measures.Measure100. I need to convert this to an ...

Exploring the Power of Angular's Redux Implementation with Lazy Loading Strategy

Implementing Redux with Angular has been incredibly beneficial for me, but I am curious about how lazy loading can be incorporated alongside it. Can these two techniques work well together? ...