Trying to establish communication between a service and component in Angular, where the service holds a value and the component subscribes to its changes. Currently utilizing rxjs Subscription, but encountering an issue:
Uncaught (in promise): Error: No provider for Subscription!
This is what's implemented in the service:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class PracticeContextService {
practice: Subject<any> = new Subject<any>();
public practiceSelected$ = this.practice.asObservable();
setPractice(providerId: string) {
this.practice.next({ providerId: providerId });
}
getPractice(): Observable<any> {
return this.practice.asObservable();
}
}
And here's how it's handled in the component:
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { PracticeContextService } from '../practice-context.service';
@Component({
selector : 'practice-context-selector',
templateUrl : './practice-context-selector.component.html',
styleUrls : ['./practice-context-selector.component.css']
})
export class PracticeContextSelectorComponent implements OnInit, OnDestroy {
practice: string;
constructor(private context: PracticeContextService,
private subscription: Subscription) {}
ngOnInit() {
this.subscription = this.context.practiceSelected$.subscribe(
practice => {
this.practice = practice;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
The component and service are then bundled into a module, which is subsequently injected into another module.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PracticeContextSelectorComponent } from './practice-context-selector/practice-context-selector.component';
import { PracticeContextService } from './practice-context.service';
@NgModule({
imports : [
CommonModule
],
declarations : [
PracticeContextSelectorComponent
],
providers : [
PracticeContextService,
],
exports: [
PracticeContextSelectorComponent
]
})
export class PracticeContextModule {}
Somewhere along the way, a mistake seems to have been made.