Broadcasting events across the entire system

Question

Broadcasting events across the entire system

I'm trying to accomplish something specific in Angular2 - emitting a custom event globally and having multiple components listen to it, not just following the parent-child pattern.

Within my event source component, I have:

export class EventSourceComponent{

  @Output() testev = new EventEmitter();

  onbtnclick(){
    this.testev.emit("I have emitted an event")
  }
 }

Now, I want other components to receive this event:

export class CmpTwoComponent{

    //Receive the emitted event with data here
  }

How can I achieve the above?

javascript angular typescript

Answer 1

Answer №1

Utilizing a shared service for this task would be ideal.

export class EventSourceComponent{
    constructor(private sharedService : SharedService){}


      onbtnclick(){
        this.sharedService.testev.next("i have emitted an event")
      }
 }

export class CmpTwoComponent{

//receiving the emitted event with data

   constructor(sharedService : SharedService){

      sharedService.testev.subscribe((event)=>{console.log(event)})
   }

}

The implementation of the sharedService would look like:

@Injectable()
export class SharedService{

   public testev = new Subject()

}

If you still require the use of Output for the parent component to subscribe normally, it can also be added in the following way:

export class EventSourceComponent{

    @Output() testev = new EventEmitter();
    constructor(private sharedService : SharedService){}

      onbtnclick(){
        this.testev.emit("i have emitted an event")
        this.sharedService.testev.next("i have emitted an event")
      }
 }

Answer 2

Utilizing a shared service for this task would be ideal.

export class EventSourceComponent{
    constructor(private sharedService : SharedService){}


      onbtnclick(){
        this.sharedService.testev.next("i have emitted an event")
      }
 }

export class CmpTwoComponent{

//receiving the emitted event with data

   constructor(sharedService : SharedService){

      sharedService.testev.subscribe((event)=>{console.log(event)})
   }

}

The implementation of the sharedService would look like:

@Injectable()
export class SharedService{

   public testev = new Subject()

}

If you still require the use of Output for the parent component to subscribe normally, it can also be added in the following way:

export class EventSourceComponent{

    @Output() testev = new EventEmitter();
    constructor(private sharedService : SharedService){}

      onbtnclick(){
        this.testev.emit("i have emitted an event")
        this.sharedService.testev.next("i have emitted an event")
      }
 }

Answer 3

Answer №2

Unfortunately, Angular does not have a built-in pattern that can fulfill your requirements.

One possible solution would be to develop a custom service. This service can be injected into AppComponent to ensure there is only one instance. Within the service, you can implement any desired logic.

Answer 4

Unfortunately, Angular does not have a built-in pattern that can fulfill your requirements.

One possible solution would be to develop a custom service. This service can be injected into AppComponent to ensure there is only one instance. Within the service, you can implement any desired logic.

Broadcasting events across the entire system

Answer №1

Answer №2

Similar questions

Error deploying to Heroku: Unable to obtain access

Different return types of a function in Typescript when the parameter is either undefined or its type is explicitly asserted vary

Accessing HTTP data through a function instead of using ngOnInit in Angular is a more efficient approach

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

Set up Admin SDK using appropriate credentials for the given environment

Access another key within an object

Can the Route be modified in Next.js?

Using jQuery to send LocalStorage data to an email address with the help of PHP

How do I go about showing every character on a separate line using a for loop?

What is the method for retrieving a temporary collection in a callback function when using node-mongodb-native find()?

Using string interpolation within the innerHTML property in Angular 2

Transmit information from an Angular 2 client to a Spring server using a POST request

Set a variable to represent a color for the background styling in CSS

Is there a way to customize the color of an element within CardHeader in MUI?

Exploring the process of implementing smooth transitions when toggling between light and dark modes using JavaScript

React.js issue with onChange event on <input> element freezing

Array vs Single Object - Comparing AngularJS / Javascript Data Structures (Basic)

The sweetalert 2 input field is unresponsive or disabled within a materializecss modal, making it impossible to type in

Currently in the process of configuring an ionic project, encountering a series of errors upon executing the npm install command

What is the best way to trigger an onclick event for an input element with a type of "image"?