Api service with changing arguments using Observables in Angular6

The behaviour I want: when a user selects a Label from dropdown menu, api is called with that Label as an argument and a chart is redrawn using data received from api. There are multiple identical charts in the page with their respective drop down lists.
The problem is that my solution is not working and I'm not sure how to make it work. My solution:

export class ChartComponent implements OnInit, OnDestroy

private _label = new ReplaySubject<string>()
//Gets value from dropdown menu
@Input() set label(value: string) this._label.next(value)

apiSub: Subscription

constructor(private apiService: ApiService)


ngOnInit()
this.apiSub = this.apiService
.getData(this._label)
.subscribe(this.redrawGraph.bind(this),
console.error
)


ngOnDestroy()
this.apiSub.unsubscribe();


redrawGraph(data:Data)
//Chart drawing logic




export class ApiService {

response= new ReplaySubject<Observable<Data>>()

constructor(private http: HttpClient)


private static _handleError(err: HttpErrorResponse | any) 'Error: Unable to connect to API.');



getData( label: Observable<string> ): Observable<Data>
label.subscribe(label =>
this.response.next(this.http
.get<Data>(`$Urls.DATA?label=$label`)
.catch(ApiService._handleError));
)

return this.response.mergeMap(x => x)



Now redrawGraph() is only called the first time label changes. And there's obviously bad behaviour when several graphs are present, because service is a singleton as far as I know, but I don't know how else to return response without binding it to "this".

What I'm trying to avoid is having to subscribe/unsubscribe to api method from Chart component every time label changes and instead just have one stream: label changes -> api call -> chart redrawn. So how to do it properly?

1 Answer
1

To make it work you need create individual subject for each chart.
The code will looks like this:

getData( label: Observable<string> ): Observable<Data>
let response : Subject = Subject<Data>();
label.subscribe(label =>
response.next(this.http
.get<Data>(`$Urls.DATA?label=$label`)
.catch(ApiService._handleError));
)

return response;



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.