11

Currently with angularjs 1, I am using the $on and $broadcast event mechanisms, which are available as part of $rootscope and $scope, to handle communication between a controller and a service. However, with the introduction of AngularJS 2, $rootscope and $scope will become unavailable. So, if I want to make my application AngularJS 2-compliant, then what should I do to get the same effect as $on and $broadcast.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Muffadal
  • 111
  • 1
  • 1
  • 5

3 Answers3

11

You could use a shared service containing a property of type Observable. Here is a sample implementation:

export class SharedService {
  observable: Observable;
  observer: Observer;

  constructor() {
    this.observable = Observable.create((observer:Observer) => {
      this.observer = observer;
    }).share();
  }

  broadcast(event) {
    this.observer.next(event);
  }

  on(eventName, callback) {
    this.observable.filter((event) => {
      return event.name === eventName;
    }).subscribe(callback);
  }
}

You can notice that you need to share the observable because it's cold by default.

An important thing consists in defining your service when bootstrapping your application to be able to use the same instance within the whole application:

bootstrap(AppComponet, [ SharedService ]);

Here is the corresponding plunkr: https://plnkr.co/edit/bpIVxRrWggLVrS9BdQ6w?p=preview.

See this question for more details:

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Can I use EventEmitter or Observable with angular 1 or it is only available with angular 2? Currently, I am using $broadcast & $on in my application for sending Signal R updates. – Muffadal Mar 23 '16 at 09:44
  • rxjs isn't used by Angular1 itself whereas it's part of Angular2 out of the box. I think that this library could be used in Angular1 because it's a third-party one but I never tried... – Thierry Templier Mar 23 '16 at 09:49
  • Thanks Thierry. So, If I understand correctly "EventEmitter" is from NodeJs & "Observable" is part of RxJs. – Muffadal Mar 23 '16 at 10:25
  • EventEmitter is an Angular2 class that extends `Subject` (a class from Rxjs). It's part of the core of the framework to implement / handle custom events. – Thierry Templier Mar 23 '16 at 10:28
  • One problem I am facing using this, is that `sharedService.on('eventName',()=>{})` is triggered even when the view is not active. How do I have this? – Shyamal Parikh Aug 31 '17 at 10:02
  • `.share()` doesn't work after upgrading to rxjs 5.5.2. Any ideas on how to make this work? – Shyamal Parikh Nov 10 '17 at 10:44
1

There is no such thing in Angular2. Custom shared services are used for this. See also Global Events in Angular 2

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
0

AngularJs inbuilt does not provide Broadcast and Emit, you can implement with custom code like Plnkr

kushal
  • 181
  • 14