Angular: How forkJoin changes the behavior of Subjects

Hey everyone, can someone help me understand this situation?

Here is the code that's working:

this.sessionService.current$.subscribe(session => { console.log('WORKING', session); });

But this code is causing issues:

forkJoin([
      this.sessionService.current$
    ])
      .subscribe(([
        session
      ]) => {
        console.log('NOT WORKING', session);
...
    

After making a slight adjustment, it started working:

forkJoin([
      this.sessionService.current$.pipe(take(1))
    ])
      .subscribe(([
        session
      ]) => {
        console.log('WORKING', session);
...
    

The current$ property in SessionService is defined as follows:

private readonly subject$: Subject<Session> = new BehaviorSubject<Session>(null);
public readonly current$: Observable<Session> = this.subject$.asObservable();

There is an init() method where I retrieve data over HTTP and emit it to this.subject$;

Thank you for pointing me in the right direction!

Answer №1

forkJoin will only emit its value once all of the source Observables have emitted at least once and completed. If you are utilizing a Subject as a source Observable for forkJoin() and you include take(1), you are essentially prompting it to complete so that forkJoin can also emit and then complete.

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

Sending Angular signal from child component to parent component

While working in Angular, I have been utilizing event emitters to transmit data from a child component to a parent component. This allows the parent component to update shared data based on notifications from the child. Now with Signal being introduced i ...

Limit file upload size to less than 1MB in Angular 2 with typescript using ng2-file-upload

Having issue with my code - I can't upload a file larger than 1mb even though maxFileSize is set to 50mb. Can anyone help me troubleshoot? @Component({ moduleId: module.id, selector: 'NeedAnalysisConsult', templateUrl: 'nee ...

Exploring TypeScript interfaces with optional properties and returning types

As a newcomer to TypeScript, I am currently exploring the documentation and came across an example in the "Optional Properties" section that caught my attention: interface SquareConfig { color?: string; width?: number; } function createSquare(config: ...

Displaying live, real-time information using ng-apexcharts

Is there a way to leverage the results of this loop: <div *ngFor="let hour of hours | async">{{ hour.messages }}</div> and incorporate it into the [series] of an Apex Chart? An attempt like this: <apx-chart *ngFor="let hour of hours | asyn ...

Angular static dropdown option

<input [formControl]="twitterHandle" id="twitterHandle" placeholder="twitterHandle"> Fetching the input value from the Twitter handle input field using the following code: twitterHandle = new FormControl(); this.twitterHandle.value; Similarly, if ...

Unable to start an expo project in bare workflow using TypeScript

Can someone help me with setting up an expo bare workflow using TypeScript? I ran the command "expo init [project name]" in my terminal, but I can't seem to find the minimal (TypeScript) option. ? Choose a template: » - Use arrow-keys. Return to sub ...

Angular HTTP client failing to convert response data to specified type

Recently, I started using the new HttpClient and encountered an issue where the response is not cast with the provided type when making a call. I attempted to use both an interface and a class for casting, but it seems that only interfaces work as shown in ...

Accessing embedded component within an Angular template

I have a ng-template that I utilize to generate a modal with a form on top of one of my other components like this: <div> <h1>Main component content...</h1> <button (click)="modals.show(newthingmodal)">Create New T ...

Receiving an error while trying to install packages from the NPM registry due to non

I am facing some challenges while attempting to install my Ionic App through the registry along with its dependencies. I have been using npm i --loglevel verbose command, and my ~/.npmrc file is configured as follows: //nexus.OMMITED.com/repository/:_auth ...

Is it possible for a TypeScript function to be used as a React prop even if it conflicts with the function signature's in

Why does the TypeScript type checker allow a prop with a function parameter that does not strictly match the definition? For example, I have a function called callbackImpl = (str: string): number, which is passed as a React prop parameter defined as callb ...

Angular 4 - Unexpected path match failure triggered by route query parameters

After scouring through multiple discussions and questions regarding the different routing options in Angular 4, I have been unable to resolve an issue related to passing queryParams to an Angular 4 route. Whether passing them into the URL like this http: ...

Having trouble importing a TypeScript file from the node_modules directory in Angular 2

Incorporating Google Map places into my Angular 2 project has been a challenge. npm install angular2-google-map-auto-complete https://i.sstatic.net/Vwi5h.png An error is occurring as the module cannot be found: https://i.sstatic.net/jVonb.png Could so ...

When ng-test is executed in an Angular service, the function array.some is not found

After retrieving allUsers from the cache and initializing it, I then set the boolean value of specialUserExists based on a condition in allUsers using allUsers.some() (reference to the Array.prototype.some() method). service.ts @Injectable({ providedIn: ...

Exporting declarations and different export types within a TypeScript ambient module

I am currently working on adding specific types for the config module in our application. The config module is generated dynamically from a JSON file, making it challenging to type. Since it is a node module, I am utilizing an ambient module for the typing ...

Extracting data from an array using Angular

Currently, I am developing an Angular application that involves handling an array structured like the one below. [ { Code: "123", Details:[ { Id: "1", Name: "Gary" }, { ...

Material UI autocomplete is not detecting the options parameter as an array

I am currently working on implementing an autocomplete field that retrieves options from my component's state, which in turn fetches data from the backend. Here is a snippet of my component: export const Person: React.FC<PersonProps> = ({name, a ...

Angular transitions do not smoothly animate when a new component is added

Exploring ways to animate the appearance and disappearance of a new Angular component in my application has been quite challenging. Referencing the guidelines provided by Angular itself at https://angular.io/guide/transition-and-triggers#enter-and-leave- ...

Unable to modify an attribute due to TypeScript error: Type 'string' cannot be assigned to type 'never'

I am trying to modify an attribute of an object in TypeScript and React, but I keep encountering the following error message: Type 'string' is not assignable to type 'never'. This happens even though I have a check in place to verify th ...

Updating a subscribed observable does not occur when pushing or nexting a value from an observable subject

Help needed! I've created a simple example that should be working, but unfortunately it's not :( My onClick() function doesn't seem to trigger the console.log as expected. Can someone help me figure out what I'm doing wrong? @Component ...

Structuring a TypeScript microservices repository on GitHub: Best practices to follow

Currently, I am in the process of designing a set of microservices. The structure I have been following involves each item having its own repository. my-project-logger my-project-numbers-service includes: my-project-logger type definitions + class obje ...