Angular 2 - Using RXJS Observables

Question

I have the following jsfiddle in Angular 1 which has two components, boxA, boxB that listens to a RXJS subject called msgSubject defined in msgService.

The mainCtrl broadcast a message through msgService broadcast function. If boxA and boxB are subscribed to the msgSubject (there is an option to unsubscribe) the updated message will show in each respective component view.

Angular 1 Observable Js Fddile

My question is how do I replicate this in Angular 2? I've googled and most of the tutorials relate to HTTP and asynchronous search. I appreciate if someone can at least tell me the syntax to setup the subject, broadcast and subscribe. Any help I am so grateful for. Thanks in advance.

Angular 1 Code

HTML

<div ng-app="myApp" ng-controller="mainCtrl">
  <style>

  .table-cell{
    border-right:1px solid black;
  }
  </style>
  <script type="text/ng-template" id="/boxa">
  BoxA - Message Listener: </br>
  <strong>{{boxA.msg}}</strong></br>
  <button ng-click="boxA.unsubscribe()">Unsubscribe A</button>
  </script>
  <script type="text/ng-template" id="/boxb">
    BoxB - Message Listener: </br>
  <strong>{{boxB.msg}}</strong></br>
  <button ng-click="boxB.unsubscribe()">Unsubscribe B</button>
 </script>

  <md-content class='md-padding'>
    <h3>
      {{name}}
    </h3>
    <label>Enter Text To Broadcast</label>
    <input ng-model='msg'/></br>
    <md-button class='md-primary' ng-click='broadcastFn()'>Broadcast</md-button></br>
    <h4>
    Components
    </h4>
    <box-a></box-a></br>
    <box-b></box-b>
  </md-content>





</div><!--end app-->

Javascript

var app = angular.module('myApp', ['ngMaterial']);
app.controller('mainCtrl', function($scope,msgService) {

   $scope.name = "Observer App Example";
   $scope.msg = 'Message';
   $scope.broadcastFn = function(){
        msgService.broadcast($scope.msg);
   }


});

app.component("boxA",  {
      bindings: {},
      controller: function(msgService) {
        var boxA = this;
        boxA.msgService = msgService;

        boxA.msg = '';

        var boxASubscription = boxA.msgService.subscribe(function(obj) { 
            console.log('Listerner A');
          boxA.msg = obj;
                });

        boxA.unsubscribe = function(){
            console.log('Unsubscribe A');
            boxASubscription.dispose();
        };

      },
      controllerAs: 'boxA',
      templateUrl: "/boxa"
})
app.component("boxB",  {
      bindings: {},
      controller: function(msgService) {
        var boxB = this;
        boxB.msgService = msgService;

        boxB.msg = '';
        var boxBSubscription = boxB.msgService.subscribe(function(obj) { 
            console.log('Listerner B');
          boxB.msg = obj;
                });

        boxB.unsubscribe=function(){
            console.log('Unsubscribe B');
          boxBSubscription.dispose();
        };
      },
      controllerAs: 'boxB',
      templateUrl: "/boxb"
})

app.factory('msgService', ['$http', function($http){
    var msgSubject = new Rx.Subject();
    return{
        subscribe:function(subscription){
            return msgSubject.subscribe(subscription);
        },
        broadcast:function(msg){
        console.log('success');
            msgSubject.onNext(msg);
        }
    }   
}])

Answer 1

You could use a service to communicate between the two components:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class BroadcastService {

  private broadcastSource = new Subject<string>();

  // Observable string streams
  // Return as observale to encapsulate the subject
  broadcastAnnounce$ = this.broadcastSource.asObservable();

  // Service message commands
  announceBoradcast(message: string) {
    this.broadcastSource.next(message);
  }
}

Then in one components send a broadcast message:

BroadcastService.announceBoradcast("Hello World");

Then other component can subscribe to the broadcast:

BroadcastService.broadcastAnnounce$.subscribe((message) => {
    console.log(message);
})

Here is some more information on communication between components in Angular2: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service