Tips for generating a subject in rx.js while utilizing 2 parameters

Within my Angular2 application, I am utilizing a communication service to handle interactions between components.

When calling the method:

this.notification.create('test');

The service structure is as follows:

export class NotificationService {
  private static notificationSource = new Subject<any>()

  notiCreated$ = NotificationService.notificationSource.asObservable();

  create(message) {
    NotificationService.notificationSource.next(message);
  }
}

The function being called is:

  this.subscription = notification.notiCreated$.subscribe(
    data => {
       console.log(data);
       this.createNotification(data, 'warning');
  });

However, there arises an issue when attempting to pass two parameters. How can this be achieved?

Answer №1

When using the next API with the signature next(value: T): void, only one parameter can be passed in at a time. Ref: http://reactivex.io/rxjs/class/es6/Subscriber.js~Subscriber.html

An alternative approach is to group the messages within an object:

this.notification.create({message1:'test', message2:'test2'});

Then, when consuming the messages, you can select the specific message needed:

 this.subscription = notification.notiCreated$.subscribe(
    data => {
       console.log(data.message1, data.message2);
       this.createNotification(data.message1, 'warning');
  });

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

The error message "Ionic 3 encountering issues with accessing property 'valid' from undefined or null reference"

As I was setting up a form on a CRUD using Firebase, initially just storing name and number as string types, I decided to add more parameters of the same type. However, I encountered an issue with the error message "Unable to get property 'valid' ...

Material-UI Alert: The property `onKeyboardFocus` for event handling is unrecognized and will not be applied

Here is a more detailed trace of the issue: warning.js:33 Warning: Unknown event handler property `onKeyboardFocus`. It will be ignored. in div (created by IconMenu) in div (created by IconMenu) in IconMenu (created by DropdownMenu) in div ...

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

When creating a table, I utilize ng-repeat to generate table rows. Whenever the dropdown changes, a function is triggered which applies certain conditions. Based on these conditions, an object is added to an array that is bound to a scope variable. Here i ...

Coloring intersected meshes in three.js will recolor every mesh in the scene

My attempt to change the color of a mesh on mouse hover is not functioning as expected. Instead of coloring only one mesh red, every single mesh is being filled with the color. Upon inspecting the intersected objects during debugging, it shows only one el ...

How can angular/typescript be used to convert a percentage value, such as 75.8%, into a number like 75.8?

I have obtained a value (for example, "75.8%") as a string from an API and I need to convert it to a number in order to apply conditions. For instance: <div class="container" [ngClass]="{ 'pos' : value > 0, ...

What is the best way to take any constructor type and transform it into a function type that can take the same arguments?

In the code snippet below, a class is created with a constructor that takes an argument of a generic type. This argument determines the type of the parameter received by the second argument. In this case, the first parameter sets the callback function&apos ...

Verifying callback type in Typescript based on another argument's validity

There is a JavaScript function that I am working with: const fn = (cb, param) => { cb(param); }; This function is meant to be called in two ways within TypeScript: const cb0 = () => {}; fn(cb0); const cb1 = (param: string) => { }; fn(cb1, &a ...

Dynamic React Gallery with Interactive Image Picker

Looking to develop a new photo management application as an alternative to Google Photos, with a focus on displaying and selecting images in a user-friendly way. Currently using the react-grid-gallery library for this purpose. Here is my current implement ...

Switching Font Family Option for Selection Mat in Angular Material

I'm currently working on changing the font of the options inside mat-select ("In what city were you born", etc). After some experimentation, I found that by setting ViewEncapsulation to none (allowing styles from other files to bleed in), I am able t ...

Angular and RxJS can be set up to delay the next call from BehaviorSubject in situations where there are multiple

Within my Angular application, I maintain a state using a service that stores the data as a BehaviorSubject. Whenever new data is received from the server, the next function is called to update the existing data and notify all subscribers. PseudoCode: ...

Errors occur with Metro bundler while utilizing module-resolver

Recently, I completed a project using the expo typescript template that runs on both iOS and Android platforms, excluding web. To enhance my development process, I established path aliases in the tsconfig.json file as shown below: "paths": { "@models/ ...

Exploring the Power of Vercel Deployment: Crafting a Custom CORS Middleware for Your API

Recently, I have been testing different methods to avoid a CORS error in my upcoming app deployed on Vercel. The only solution that worked for me was manually setting the headers for each API request, as shown below: export default async function handler( ...

Tips for embedding HTML/CSS snippets in backticks when using TypeScript with AngularJS

Does anyone else experience the issue of their Angular 2 templates showing up as gray text in Visual Studio Code? I'm unable to use autocomplete or see my CSS properly. Is this a settings problem or is there a plugin that can solve this? BTW, I am us ...

Collection of functions featuring specific data types

I'm currently exploring the idea of composing functions in a way that allows me to specify names, input types, and return types, and then access them from a central function. However, I've encountered an issue where I lose typing information when ...

What is the alternative method for establishing a child formGroup within a parent formGroup without using the initializer function?

Can anyone help me with dynamically setting a property in my formGroup to another formGroup, essentially creating a child formGroup? // Example 1 var parent = this._formBuilder.group({ id: [''], child: this._formBuilder.group({ na ...

Showing Firebase messages in a NativeScript ListView in an asynchronous manner

I am currently struggling to display asynchronous messages in a ListView using data fetched from Firebase through the popular NativeScript Plugin. While I have successfully initialized, logged in, and received the messages, I'm facing challenges in ge ...

Issues with the functionality of Angular Material prebuilt themes are causing inconsistencies

After spending a considerable amount of time trying to understand Angular Material Themes, I decided to start by importing a prebuilt theme. However, I encountered some issues along the way. The theme doesn't seem to apply to all the tags as expected. ...

What is the recommended data type for Material UI Icons when being passed as props?

What specific type should I use when passing Material UI Icons as props to a component? import {OverridableComponent} from "@mui/material/OverridableComponent"; import {SvgIconTypeMap} from "@mui/material"; interface IconButtonProps { ...

Error message indicating the Ionic 5 Phonegap-NFC plugin is not installed, even though it has been successfully installed

While utilizing the NFC library, I followed the Ionic documentation recommendations at (https://github.com/chariotsolutions/phonegap-nfc) and (https://ionicframework.com/docs/native/nfc). However, when trying to access the code in my component that calls ...

Guide to adding annotations to a PDF document using Angular 2

As a novice in the field of Angular development, I am seeking guidance. Currently, I have an application that displays PDF files. My goal is to be able to annotate and make changes on these PDF files by adding drawings such as circles, lines, or text. Ho ...