Proper way to create and listen to a HTTP observable with dynamic payload

Issue

Scenario

User has a menu that create's a set of car criteria that will be used to filter out the results server side. When the user clicks the Load button, it sends the criteria set to obtain right results and then pass them to a child component for display.

I am trying to do this properly by creating a observable and while it works, it just doesn't smell right.

Parent HTML

<h3>Select Criteria</h3>
<div>
<!-- Bunch of dropdowns and radio buttons and gizmos that form the filter menu omitted for brevity-->
</div>
<button (click)="loadCars()">Load Cars</button>
<child-comp-table [dataSet]="results$ | async"><child-comp-table>

Parent TS

var _results$ = new BehaviorSubject<any[]>([]);
readonly results$ = this._results$.asObservable();

loadCars() {
    // construct payload based on selected criteria and store in postPayload variable

    this.http.post(url, postPayload).subscribe((res:any) => {
        this._results$.next(res.data);
    });
}

Is this the proper way to set this up, my concern stems from the fact that i have to subscribe as opposed to using the existing pipe.

Solution

this.http.post(url, postPayload) returns an Observable, so i don't see why you're subscribing to it and "hold" the result inside a behavior subject.

i would go with the following direction:

let results$ = of([]); // init the obs with an observable containing empty list

loadCars() {
    this.results$ = this.http.post(url, postPayload);
}

by the way, I would also take out the HTTP call to it's own service, but that's another matter

Answered By - gil