Angular RxJS: Hot Observable turned to Cold

Question

This is my related code:

private searchClickSubject:Subject<void>;  // Submit form
private searchClick$:Observable<any>;
private metrics$:Observable<MetricGroup>;

constructor() {
    // Prepare observers
    this.searchClickSubject = new Subject<void>();
    this.searchClick$ = this.searchClickSubject.asObservable();
}

public ngOnInit() {
    // Grab search button click event
    this.searchQuery$ = this.searchClick$.pipe(
        map(() => <Query>{
            offset: 0,
            limit: AmetriquesComponent.DEFAULT_PAGE_SIZE
        })
    );

    const loading = () => tap(() => this.loadingPage());
    const getAggregatedMetrics = () => switchMap((query: Query) => this.service.getAggregatedMetrics(query));
    const loaded = () => tap((aggregatedMetrics: MetricGroup) => this.loadedMetric(aggregatedMetrics));

    this.metrics$ = this.searchQuery$
        .pipe(
            loading(),
            getAggregatedMetrics(),
            loaded(),
            share()
        );
}

First of all, I think searchClick$ Observable is hot, since form is generating on submit events regardless of any subscription is attached on.

As you can see, after an "submit" event is emitted, I make an http request. So for each "submit form" emitted a new http request is emitted.

When I attach a subscription on that last Observable, a separate http request is made, so it sounds like first Observable has turned on a cold Observable.

What do you think about my train of thoughs?

Jesse Jesse · Accepted Answer · 2019-05-28T13:49:57

I still see this as a hot observable since it will never emit a complete notification. The inner subscription of getAggregatedMetrics will emit one, but not the outer one. Also share() turns cold observables hot per this article. Unless I'm not understanding the question?

Angular RxJS: Hot Observable turned to Cold

1 Answers