Click here to Skip to main content
15,917,652 members
Articles / Programming Languages / Typescript
Tip/Trick

Broadcast Messaging in Angular

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
17 Jan 2022CPOL2 min read 11.7K   1   4
Broadcast messaging in Angular with the observer design pattern and the rxjs npm package

Introduction

The Observer design pattern is one of the most important design patterns in the GoF book and this article shows how it can be used to facilitate broadcast messaging in Angular. Broadcast messaging means that a sender, the Publisher, sends messages to several receivers, the Subscribers. Any component can via the Publisher send messages to any other component subscribing to the Publisher Service.

Background

In Angular, it’s easy to send messages between Parent and Children components. This is standard procedure in any Angular application. However, to make any component send messages to any other component anywhere in the component hierarchy can be hard. The code in this article contains the bare minimum of what's needed to illustrate the principle and I have tried to make the code clean and short. The application from where the code is fetched is based on Angular2 version 8.

The Publisher Service

The Publisher Service is a Singleton class using the rxjs npm package and looks like this:

JavaScript
import * as Rx from 'rxjs';
import {InformationToShow} from '../models';

export class PublisherService{

    private instance: Rx.Subject<InformationToShow>;

    createInstance(): Rx.Subject<InformationToShow> {
        const instance = new Rx.Subject<InformationToShow>();

        return instance;
    }

    public getInstance(): Rx.Subject<InformationToShow> {

        if (!this.instance) {
            this.instance = this.createInstance();
        }

        return this.instance;
    }
}

The model class InformationToShow may look like this:

JavaScript
export class InformationToShow{
    Information: string;
    SubscriberId: number;
...

}

This class can be extended and changed in any way you want. SubscriberId is used to make it possible to send messages to a particular component even though all subscribers receive the same message.

The Subscribers

The Subscribers are the components listening for and acting on changed information by subscribing on the Publisher Service. Imagine that there are many instances of this code in the application. Each instance has its own SubscriberId to make it possible to send messages to a particular instance even though all instances receive the same message. The Publisher Service is injected via Angular constructor dependency injection like all other services in the application:

JavaScript
constructor(private publisherService: PublisherService) { }

In ngOnInit, the service is subscribed to like this:

JavaScript
publisherSubscription: any;

ngOnInit() {
   this.publisherSubscription = this.publisherService
     .getInstance().subscribe((data: InformationToShow) => {
     
     if (data.SubscriberId === this.information.SubscriberId)
     {
         this.information = data;        
     }
  });
}

Here, you see how SubscriberId can be used to make sure that only information belonging to a particular instance is taken care of by the component.

Send Messages From Anywhere in the Program

To send messages, the method getInstance().next(informationToShow) is used, like this:

JavaScript
onInformationChange(informationToShow: InformationToShow) {
      this.publisherService.getInstance().next(informationToShow);
   }
}

Imagine that this code can be used in many places in the application, thus facilitating many-to-many communication.

At last, unsubscribe in ngOnDestroy():

JavaScript
ngOnDestroy() {
    this.publisherSubscription.unsubscribe();
}

History

  • 16th November, 2019: First version
  • 19th November, 2019: Added unsubscribe

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Sweden Sweden
I work as Senior Developer mainly in Microsoft environment and my strenghts are SQL, C#, Vue.js, Angular and ReactJS.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA19-Jan-22 4:39
professionalȘtefan-Mihai MOGA19-Jan-22 4:39 
GeneralRe: My vote of 5 Pin
Gunnar S19-Jan-22 19:18
Gunnar S19-Jan-22 19:18 
QuestionA couple of suggestions Pin
Bob Nadler18-Nov-19 10:20
Bob Nadler18-Nov-19 10:20 
  1. I would hide the next() method and have the client call publish() instead. This makes better semantic sense for a pub/sub utility.
  2. If the client component is destroyed, they need to also unsubscribe() from any subscriptions in their ngOnDestroy().
Here's a similar message bus implementation: Message Bus pattern in Angular 2 and TypeScript[^]


modified 19-Nov-19 11:36am.

AnswerRe: A couple of suggestions Pin
Gunnar S18-Nov-19 18:47
Gunnar S18-Nov-19 18:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.