subject in service called but no data coming through when subscribed. [angular 4]

Question

I have a service which is provided on the app module:

The service:

import {Subject} from 'rxjs/Subject';
import {Observable} from "rxjs/Observable";
import {VenueAdminInceptionModel} from '../../models/venueadmininceptionmodel/venueadmin.inception.model';

export class VenueAdminInceptionService{

  // pk and url service
  private pkurlsend = new Subject<VenueAdminInceptionModel>();

  sendurlpk(payload: VenueAdminInceptionModel){
    this.pkurlsend.next(payload);
  }

  receiveurlpk(): Observable<VenueAdminInceptionModel>{
    return this.pkurlsend.asObservable();
  }
}

provided on the app module:

providers: [VenueService, ModalToggleService, VenueAdminInceptionService],

the service is fired as such in one component:

 constructor(private inceptionservice: VenueAdminInceptionService, private route: ActivatedRoute, private router: Router) { }

  navipush(pk){
    const payload = {
      pk: pk,
      permission: this.route.snapshot.params.permission,
    };
    this.inceptionservice.sendurlpk(payload);
    this.router.navigate(['/admin', 'venue-admin', payload.permission, payload.pk,'profile']);
  }

and subscribed to in another:

export class TabandtitleviewComponent implements OnInit, OnDestroy {
  inceptionservicevar;
  permission;
  venueid;
  venueadmin = false;
  suitsadmin = false;

  constructor(private inceptionservice: VenueAdminInceptionService) { }

  ngOnInit() {
    this.inceptionservicevar = this.inceptionservice.receiveurlpk()
      .subscribe(
        (incep: VenueAdminInceptionModel) => {
          this.permission = incep.permission;
          this.venueid = incep.pk;
          console.log('it happend');
          if(this.permission === 'venue'){
            this.venueadmin = true;
            this.suitsadmin = false;
          }
          if(this.permission === 'suits'){
            this.venueadmin = false;
            this.suitsadmin = true;
          }
        }
      );
  }

  ngOnDestroy(){
    this.inceptionservicevar.unsubscribe();

  }

in the html template of the subscribed component logic is used wether to display one button or another:

<div id="navtabrow" class="row"> <!-- nav tab row-->
  <!-- venue admin view-->
  <a *ngIf=" venueadmin" [routerLink]="['/admin','venue-admin',venueid, 'profile']">
    <div class="navtab">
      Venue Profile
    </div>
  </a>
  <!-- suits admin view-->
  <a *ngIf="suitsadmin" [routerLink]="['/admin','suits-venue-admin',venueid,'profile']">
    <div class="navtab">
      Venue Profile
    </div>
  </a>

as both buttons are not to be displayed on component init. They remain in the false state. Which means the observer is not seeing the change.

What is going on? Do you need to see my architecture? I figure that doesn't matter since the service is app wide.

There might be a case that the `sendurlpk` is fired BEFORE the subscription happens. You could change the `Subject` to `BehaviorSubject` so that it will hold the last value and emit it out when subscribed. — Harry Ninh, Jan 29 '18 at 22:55
@HarryNinh Thank you, I will give that a try and report back. — , Jan 29 '18 at 22:55
@HarryNinh using behavior subject instead of subject is indeed what fixed it. I understand why I need to use behavior instead of a regular subject. Dude Seriously Thank you So much!!!!!!!!!!!!!!!!!! — , Jan 29 '18 at 23:16
Glad it worked out for you. Could you mark yours as answer so folks can move on :) — Harry Ninh, Jan 29 '18 at 23:39

score 0 · Answer 1 · answered Jan 29 '18 at 23:17

0

This is the answer:

Use a Behavior Subject instead of a Subject;

BehaviorSubject vs Observable?

answered Jan 29 '18 at 23:17

subject in service called but no data coming through when subscribed. [angular 4]

1 Answers1