There are two components in my project that share a common service.
shared.service.ts
// ..... skipping top level codes
private pickAnalysisForBubble = new Subject<any>();
analysisForBubble$ = this.pickAnalysisForBubble.asObservable();
mapToggleToPointOrBubble(value) {
this.pickAnalysisForBubble.next(value);
}
utility.component.ts
In the view (utility.component.html), there are two radio buttons with one pre-selected:
<input type="radio" name="rdbBubblePoint" class="rdbBubblePoint" value="Point" (change)="changeToPoint($event)"> Point<br>
<input type="radio" name="rdbBubblePoint" class="rdbBubblePoint" value="Bubble" (change)="changeToPoint($event)" checked="checked"> Bubble<br>
In the component (utility.component.ts), there is a method to handle the click event: (I've imported the shared.service and added it as a provider.)
changeToPoint(event){
# analysisInteraction is the shared service constructor
this.analysisInteraction.mapToggleToPointOrBubble(event.target.value);
}
map.component.ts
I have imported the shared.service and added it as a constructor. In the ngOnInit lifecycle hook, I attempted to subscribe to changes, but unfortunately, it is not functioning as expected.
# analysisInteraction is the shared service constructor
this.analysisInteraction.analysisForBubble$.subscribe(
data => {
this.DrawType = data;
console.log("Drawtype fixed");
});
I'm using a subject to detect changes based on this tutorial. Can you help me identify what I may be doing incorrectly?