Getting deferred variable from subscription in Angular2 service

Question

So, I have the following services / components:

dasboard.service.ts (excerpt)

@Injectable()
export class DashboardService extends RestHelpers {
    private _Manager$: Subject<Manager> = new Subject();

    constructor(private http: Http) {
        super(http);

        this.get<Manager>(url).subscribe(result => {
            this._Manager$.next(result);
        }, error => this.errorMsg = error);
    }

    get manager$(): Observable<Manager> {
        return this.Manager$.asObservable();
    }
}

rental.service.ts (excerpt)

@Injectable()
export class RentalService extends RestHelpers {
    constructor(private http: Http, private _dashboardService: DashboardService) {
        super(http);

        this._dashboardService.manager$.subscribe(r => {
            this._rentals = r.Rentals;
            this._rentals$.next(this._rentals);
        });
    }

    get rentals$(): Observable<{}> {
        return this._rentals$.asObservable();
    }

    findRental(id: string): Observable<Rental> {
        return this.rentals$.map((r: Rental) => r.find(rental => r.RentalId === id));
    }
}

rental-detail.component.ts (excerpt)

export class RentalDetailsComponent implements OnInit {

    private rental: Rental;
    public title = "Rental";

    constructor(private _rentalService: RentalService, private route: ActivatedRoute, private router: Router) {
        this.rental = <Rental>{};
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            let id = params['id'];

            if (id !== undefined) {
                this._rentalService.findRental(id).subscribe((rental) => {
                    this.rental = rental;
                    this.title = rental.RentalName; 
                });
            }
        });
    }
}

By the time the component is constructed, the service was already called on another component once, and when I want to route it to the details I can never get the rental. On the component call, the service is initiated (the constructor runs), but seems that the subscribe method produces nothing, although the first time it is called the subscribe actually is working.

Order of calls:

Dasboard Component --- Dashboard Service
|
+ Rental Dashboard Component --- Rental Service --- (depends on) Dashboard Service
  |
  + Rental Details Component --- Rental Service --- (depends on) Dashboard Service

The rental components are both children on the dashboard component via router-outlet, so they are not direct components.

I've thought about watching a variable to wait for the subscription to complete, I tried using promises but they never return the value of the subscription, and this is the best I came up with but it doesn't work. This is my first time using rxjs and angular2, and I cannot untie this knot. Help will be much appreciated.

package.json (excerpt)

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/http": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"angular2-in-memory-web-api": "0.0.15",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"

Answer 1

I think changing the observable in RentalService to

private _rentals$: Subject<Rental> = new BehaviorSubject();

should do what you want