Angular JS 1.5 - Using the same Observable RXJS in two components

[Ka Tech]

I'm using AngularJs 1.5. I am using ng-route to create a SPA. For 2 templates I have used the new Angular component as the template let's call them 'employee' and 'company'. Within each route there is a sub component that searches the company database call it companySrch. How the sub component works is the companySrch component is loaded in either 'company' or 'employee' when the user want's to search the company database within either the employee or company. When the user selects a record in the search results, the record is broadcast through a factory service with a registered RXJS observable as follows:

companySrch.getRecordFn = function(result){
 companySrch.output={id:result.cs_id, type:result.type,name:result.name, active:  result.active};
 //BROADCAST RECORD SELECTED via companySrchService
 companySrch.companySrchService.recordBroadcast(companySrch.output);
 companySrch.navService.nav.navExt = false;
}  

Then if the user is in employee or company template, that record is passed through the template's subscription to the RXJS event. Example of snippets from each controller of the employee and company respectively:

EMPLOYEE CONTROLLER SNIPPET

var employee = this;
employee.companySrchService = companySrchService;
employee.companySrchService.subscribe(function(obj) {
//GET COMPANY RECORD UPON BROADCAST
employee.submit[0].cs_name = obj.name;
employee.submit[0].cs_type = obj.type;
employee.submit[0].fk_cs_id = obj.id;
});

COMPANY CONTROLLER SNIPPET

var company = this;
company.companySrchService = companySrchService;
company.companySrchService.subscribe(function(obj) {
 //GET COMPANY RECORD UPON BROADCAST
company.getRecordFn(obj.id);
});

The issue I have when I am in the employee template and a companySrch record is broadcast the subscribed event also is fired in the 'company' on the assumption I have previously loaded the company template. As such this causing an error as the company component have been removed from the DOM when the component was switched to employee as it still trying to run the subscription function. The same thing happens when I do it in the reverse (load employee, then company and perform companySrch). 

Is there any way I can prevent the template that is not in view or removed from the DOM from listening to the subrsiption broadcast??...I still want the subject to be broadcasting. Or is there a way to break the component reference to companySrchService when the  respective component is destroyed ?? 

Here is my factory service too:

app.factory('companySrchService', ['$http', function($http){
 var companySrchSubject = new Rx.ReplaySubject();//rxjs var to subsribed to
 return{
 //DEFINE SUBCRIBE SERVICE IN THIS CASE COMPANYSRCHSUBJECT
 subscribe:function(subscription){
 companySrchSubject.subscribe(subscription);
 },
 //BROADCAST WHEN RECORD SELECTED IN SEARCH
 recordBroadcast:function(record){
 companySrchSubject.onNext(record);
 }
 }
}])

[Sander Elias]

Hi Ka,

You need to unsubscribe on destroy. When you are no longer interested in an subscription, you call it's unsubscribe function. How that is done is a bit dependent on the RX version you are using.

In RX 4 it is done something like this:

var subscription = companySrchSubject.subscribe(subscription)
$scope.$on('$destoy`, () => subscription.dispose())

Regards

Sander

[Ka Tech]

Hi Sander,

Thanks for the quick reply. I've made a jsFiddle with the similar concept except in this instance I have a buttons to unsubscribe for each component rather than on destroy.....for simplicity. Here it is: https://jsfiddle.net/bkarv/499jhs9y/

I've tried disposing the subject but I get an error. I'm assuming I shouldn't be disposing the subject but the subscription itself hence the error. Do you mind having a look at it? Thanks heaps.

[Sander Elias]

Hi Ka,

https://jsfiddle.net/499jhs9y/8/

Hope this helps you a bit,

Regards 

[Ka Tech]

Thank you so much, you are a genius! I've been trying to figure this out for a good while now!

[Ka Tech]

Again thanks, just a quick question, would still be possible for the component to re-subscribe. If so what would be the syntax?

[Sander Elias]

Just call it again. 

    function subscribe() {
      boxA.subscription = boxA.msgService.subscribe(function(obj) {
        console.log('Listerner A');
        boxA.msg = obj;
      });
    }
    this.subscribe=subscribe
    subscibe() // subscribe on 'init'

[Karvan J]

Brilliant, once again thank you!

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/bLG6hVa_lSs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.