Notify specific Observer with the next value using Observable's .next() method

Within my Angular 2 application, I utilize a communication service for disseminating messages across various Angular components.

@Injectable()
export class CommunicationService {
    private _broadcast = new Subject<EventParam>();

    broadcast$ = this._broadcast.asObservable();

    public sendEvent(eventParameters: EventParam): void {
        this._broadcast.next(eventParameters); 
    }
}

While the current setup works effectively, there are instances where I need to target a specific component to receive my message. Is there a way in RxJs to direct a message to a designated observer?

typescriptangularrxjsobservableobservers

Answer №1

Observables are designed to be separated from Observers, so there is no direct method for performing a named look up as you might expect. However, you can utilize a filter function to carry out optional filtering.

//When using a service
communicationService.broadcast$
  //This filter allows events based on an optional field
  .filter(({type}) => !type || type === 'example1')
  .subscribe(data => /**/);

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

Misunderstanding between Typescript and ElasticSearch Node Client

Working with: NodeJS v16.16.0 "@elastic/elasticsearch": "8.7.0", I am tasked with creating a function that can handle various bulk operations in NodeJS using Elasticsearch. The main objective is to ensure that the input for this funct ...

node.jstypescriptelasticsearch

Angular 9 Singleton Service Issue: Not Functioning as Expected

I have implemented a singleton service to manage shared data in my Angular application. The code for the service can be seen below: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataS ...

javascriptangulartypescript

In React TypeScript, the property types of 'type' are not compatible with each other

I have a unique custom button code block here: export enum ButtonTypes { 'button', 'submit', 'reset', undefined, } type CustomButtonProps = { type: ButtonTypes; }; const CustomButton: React.FC<CustomButtonProp ...

reactjstypescript

Using the 'main' parameter in a TypeScript project's package.json: A comprehensive guide

Currently, I am in the process of developing a new NPM package using TypeScript and Node. The main purpose of this package is to provide users with access to a data structure that I have constructed. One aspect that I am currently trying to determine is wh ...

node.jstypescriptnpm

What causes a Typescript error when attempting to escape a newline character?

My approach is quite simple: I concatenate multiple strings and format them to make them more readable. info() { return "x: " + this.xpos.toString() + "\n" \ + "y: " + this.ypos.t ...

typescriptescapingnewline

How to reset a form group when a button is clicked in an Angular 6 responsive form?

How can I reset the form values after clicking a button? The code below demonstrates the HTML and Angular Component. Is there a way to clear the input values on the same button click event? Thank you. onAddClientNeeds() { ...

angularformsbuttonrefreshreset

How to showcase text using HTML elements in an HTML document

I am attempting to showcase a text file as HTML using Ionic. I have successfully sent a response in HTML format within a text file to the profile page, stored in the 'name' variable on the .ts page. @Component({ selector: 'page-profile&ap ...

htmlangularionic-framework

Display the information in real-time as it is being transmitted to the backend

I'm facing a challenge with the user experience. Currently, I am developing a chat application using Ionic, Angular, and Firebase. The issue at hand is that messages are only displayed once they are successfully sent to the server. This means that o ...

javascriptangularfirebasefirebase-realtime-database

Having trouble finding routes when trying to pass a token as a parameter in Angular 5

Currently troubleshooting an issue where the route doesn't match when users click on the password reset link sent to their email. Strangely, the route works fine with alphabetical or string inputs. The route in question: {path: 'reset-password ...

javascriptangularangular-ui-router

Click on the button to sort Angular data

Greetings! I am a newcomer trying to grasp the concepts of angularjs/typescript. I have compiled an array of fruits, displayed in an unordered list. My goal is to arrange them in descending order and implement a reverse search function to display the item ...

javascriptangulartypescript

Tips on how to implement conditional lazy loading of a module in Angular using the useFactory function

In my Angular project, I have a multitude of modules and components where I need to display a module's component based on specific business logic. I aim to leverage Angular's powerful lazy loading feature to optimize my application's perform ...

angulardynamicroutes

io-ts: utilizing TypeOf with DateFromISOString

struggling to validate and interpret api response: const Bar = t.type({ identifier: t.number, timestamp: DateFromISOString, }); type BarType = t.TypeOf<typeof Bar>; const jsonBar: BarType = {"identifier": 1, "timestamp& ...

typescriptfp-ts

Developing collaborative functions in Angular

Is there a way in Angular 9 to directly call static methods from HTML without using shared services or defining methods in components? I came across an old approach on How to call static method of other class in .html (not in .ts)?, but I am curious if the ...

angulartypescript

Angular ViewChild using a Directive as a selector results in a value of null

I have been working on a test component that includes an example of two directives, with one being used as an attribute directive. I am utilizing the ViewChild decorator to access these directives in the ngAfterViewInit handler. However, when I try to retr ...

angulartypescript

How can I provide multiple values for cellRendererFramework in ag-grid?

There is a lack of information on this topic, as I have only come across one SO question that remains unanswered. In my Angular app using ag-grid, I am facing an issue with the cellRendererFramework that is used to display data in a table column. I am try ...

angularag-gridag-grid-angular

What is the best way to keep an item from list A after it has been moved to list B using PrimeNg's drag and drop feature?

I am facing an issue with the drag and drop feature in PrimeNg. I have a container that contains both a table and an unordered list. My goal is to be able to drag an element from the unordered list and drop it into the table, while still retaining the drag ...

angularprimeng

Incorrect positioning of AnyChart within a reusable component (Angular version 9.1.3, Bootstrap 4.4.1, Anychart version 8.7.1) causing display issues on the DOM

I have created a test dashboard featuring two Bootstrap cards, each containing an Anychart column chart. The primary objective is to experiment with reusable components. For those interested, here is the code link on Stackblitz Upon running the code, my ...

htmlangulartypescriptbootstrap-4anychart

Angular template-driven forms with a custom validator allows for creating your own validation

Hey StackOverFlow folks, I'm currently facing an issue with a custom validation in template-driven forms. I have a stepper component and a unique form that encapsulates all the groups. For each step, I need the inputs' sum to be 100%, triggering ...

angularvalidationstepperclarity

Typescript: Creating an interface for a nested object "with a required key"

The objective is to prevent developers from declaring or accessing fields that the object does not possess. This also involves accurately defining a deeply nested object or schema. const theme: iTheme = { palletes: { primary: { main: "white", ...

reactjstypescript

How does Angular's Unchecked Form Groups address the issue?

I came across this link and found it quite insightful. The concept of strong typing is clear - it provides intellisense, prevents runtime errors by catching mistakes during compilation, or avoiding them altogether. Although I am new to the idea of revers ...

angular