Click here to Skip to main content
14,447,096 members

Broadcast Messaging in Angular

Rate this:
0.00 (No votes)
Please Sign up or sign in to vote.
0.00 (No votes)
19 Nov 2019CPOL
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:

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:

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:

constructor(private publisherService: PublisherService) { }

In ngOnInit, the service is subscribed to like this:

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:

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():

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

History

  • 2019-11-16: First version
  • 2019-11-19: Added unsubscribe

License

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

Share

About the Author

Gunnar S
Software Developer (Senior)
Sweden Sweden
I work as Senior Developer mainly in Microsoft environment and my strenghts are SQL, C# and ReactJS.

Comments and Discussions

 
QuestionA couple of suggestions Pin
Bob Nadler18-Nov-19 11:20
MemberBob Nadler18-Nov-19 11:20 
AnswerRe: A couple of suggestions Pin
Gunnar S18-Nov-19 19:47
MemberGunnar S18-Nov-19 19: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.

Tip/Trick
Posted 18 Nov 2019

Stats

1.7K views
1 bookmarked