Hearing from a variety of Observables within a Stream

I'm really struggling to grasp this concept. I have a container that is monitoring a dialog, which can emit various actions. Depending on the emitted action, I need to execute additional logic. I want to achieve this without using nested subscriptions or if statements. How can I accomplish this? Here's what I've attempted:

    this.commonProducts$
      .pipe(
        take(1),
        map(commonProducts => (this.dialogRef = this.dialog.open(AddProductDialogComponent, { data: commonProducts }))),
        switchMap(() => {
          return this.dialogRef.actions.pull(DialogProductAddActions.frequency).pipe(
            map(newProduct => {
              // perform some actions
            })
          );
        }),
        switchMap(() => {
          return this.dialogRef.actions.pull(DialogProductAddActions.schedule).pipe(
            map(newProduct => {
              // perform other action
            })
          );
        })
      )
      .subscribe(() => this.dialogRef.close());

However, only the first switchmap is effective.

Answer №1

If you want to enhance your code using the iif operator in rxjs, consider making the following adjustments:

const source1$ = this.dialogRef.actions.pull(DialogProductAddActions.frequency).pipe(
        map(newProduct => {
          // perform some actions
        })
      );
const source2$ = return this.dialogRef.actions.pull(DialogProductAddActions.schedule).pipe(
        map(newProduct => {
          // carry out other actions
        })
      );

 this.commonProducts$
  .pipe(
    take(1),
    map(commonProducts => (this.dialogRef = this.dialog.open(AddProductDialogComponent, { data: commonProducts }))),
    switchMap(() => iif(() => condition, source1$, source2$))
)

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

Modify the row height attribute using the grid feature in Material Angular

For desktop, I would like the rowHeight to be set at 80vh. However, if the screen width drops below 500px, I want to dynamically change it to 100vh. I am unsure of how to achieve this. Below is the code snippet: HTML <mat-grid-list cols="4" ...

Creating a new formGroup and submitting it with model-driven form in Angular 2

Adding New Entries to FormArray Using input Field If I want to add values to an existing array through a form input, I can utilize the (click)="addAddress()" in the HTML file and define addAddress in the component.ts to update the values in an array withi ...

Guide to implementing ES2022 modules within an extension

After making changes in my extension code to test various module types, I decided to modify my tsconfig.json file as follows: { "compilerOptions": { "declaration": true, "module": "ES2022", ...

Using Angular 6 pipes can simplify observable operations by eliminating the need for explicit typing

Recently, I upgraded my application from Angular5 to 6. Upon completing the update, I proceeded to migrate to rxjs6, which resulted in a change in my code where I was utilizing the takeWhile method. As a result, in order to subscribe to a service, my code ...

Troubleshooting problems with local references in an Angular date picker

I am currently working with an Angular date picker component and trying to access its values using a local reference. Unfortunately, when I attempt to console log the local reference, it returns undefined. The datepicker, function, and trigger are provid ...

Incorporating a Link/Template Column into Your Unique Table Design

I built a table component following the guidelines from this article: Creating an Angular2 Datatable from Scratch. While I have added features like sorting and paging to suit my app's needs, I am struggling with implementing a "Template column" to al ...

What is the reason for not hashing the password in this system?

My password hashing code using Argon2 is shown below: import { ForbiddenException, Injectable } from '@nestjs/common'; import { PrismaService } from 'src/prisma/prisma.service'; import { AuthDto } from './dto'; import * as arg ...

Trouble with styling the Ngx-org-chart in Angular

I integrated the ngx-org-chart library into my Angular project, but I'm facing issues with the styles not applying correctly. Here are the steps I followed: I first installed the package using: yarn add ngx-org-chart Then, I added the ngx-org ...

Fetching Angular component tag from language file

How can I properly connect an Angular component using innerHTML? <span [innerHTML]="'prompt' | translate | safeHtml"></span> I want to display the "prompt" content from a language file, and I am using the safeHtml pipe to avoid secu ...

Child component in Angular not receiving updated variable values when being called from parent component

Struggling with dynamically updating the style of an element. I've added margins on top of an image by creating a child component to handle it. I invoke a function on the child component that calculates the margins and sets a variable. This is how t ...

Creating a stepper module in Angular 6

Looking for assistance from Angular experts app.component.html <app-stepper [activeStep]="0"> <app-step [sid]="0"> <div>iam step 1</div> </app-step> <app-step [sid]="1"> <div>iam step 1& ...

Mistake in maintaining hydration with styled-components and React Context

I encountered an issue where I have two theme variants in my app - dark and light. You can view the sandbox example here ThemeContext.ts export const ThemeContext = createContext<{ theme: AppThemeInterface, setTheme: Dispatch<SetStateAction< ...

Optimal method for writing to JSON file in NodeJS 10 and Angular 7?

Not sure if this question fits here, but it's really bothering me. Currently using Node v10.16.0. Apologies! With Angular 7, fs no longer functions - what is the optimal method to write to a JSON file? Importing a JSON file is now simple, but how ca ...

"Error: The dist directory is missing in the Angular Docker File

I am in the process of Dockerizing an Angular project and here is my Dockerfile: # 1. Building the Angular app using Node.js FROM node:12 as builder WORKDIR /app COPY package.json package-lock.json ./ ENV CI=1 RUN npm ci COPY . . RUN npm run build-web -- ...

Setting a default value for a data type within Typescript

My goal is to set default values for all properties in my custom type if they are not defined. This is what I have done: // custom type with optional properties type MyType = { // an example property: str?: string } // with numerous properties, assign ...

The compatibility issue arises when trying to utilize Axios for API calls in Ionic 6 React with react-query on a real Android device in production. While it works seamlessly on the emulator and browser

My form utilizes react-hook-form to submit data to a server. Here is the code: <FormProvider {...methods}> <form onSubmit={handleSubmit(onIndividualSignup)}> <Swiper onSwiper={(swiper) => setSlidesRef(s ...

Passing user inputs from the view to the component in Angular 15

I'm new to Angular and currently developing a project with Angular 15. In my .ts component, I am fetching information from an API: export class CustomPersonalSettingsComponent implements OnInit { constructor( private personalSettingsSe ...

Angular 13 does not currently have support for the experimental syntax 'importMeta' activated

Since upgrading to angular 13, I've encountered an issue while attempting to create a worker in the following manner: new Worker(new URL('../path/to/worker', import.meta.url), {type: 'module'}) This code works as expected with "ng ...

What is the method in TypeScript for defining a property in an interface based on the keys of another property that has an unknown structure?

I recently utilized a module that had the capability to perform a certain task function print(obj, key) { console.log(obj[key]) } print({'test': 'content'}, '/* vs code will show code recommendation when typing */') I am e ...

Exploring the application of keyof with object structures instead of defined types

Looking to create a new type based on the keys of another object in TypeScript. Successfully achieved this through type inference. However, using an explicit type Record<string, something> results in keyof returning string instead of a union of the ...