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

I need a way to call a function in my Typescript code that will update the total value

What is the best way to incorporate this data into the HTML document?

Using JavaScript, create a set of buttons within a div element and implement

Convert a relative path to an absolute path using the file:// protocol

FusionMaps XT integration with VueJs: Troubleshooting connectorClick events issue

What is the best way to recycle Vue and Vuetify code?

How can I export an array in Ajax/PHP to the user as a .txt file?

Effective way to manage Angular scope without resorting to $parent.$parent

Is there a way to retrieve JSON data from a specific URL and assign it to a constant variable in a React application?

Having trouble getting autocomplete to work with JQuery UI?

Tips for presenting styled HTML content within a dynamic list using HTML and JavaScript

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object

What is the best way to perform a query in Angular using Firebase Firestore?

Providing secure access to Apostrophe-CMS S3 assets and attachments via HTTPS

Dealing with multiple v-on:click events in Vue.js

How can I extract the JSON value as a string?

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

Prevent the browser from autofilling password information in a React Material UI textfield when it is in focus

Assigning namespaces to a property of classes in typescript: A step-by-step guide

The jQuery .animate function seems to be malfunctioning