{"id":709,"date":"2023-03-24T05:00:00","date_gmt":"2023-03-24T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=709"},"modified":"2023-03-23T15:51:24","modified_gmt":"2023-03-23T22:51:24","slug":"rxjs-share-and-sharereplay-operators","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-share-and-sharereplay-operators\/","title":{"rendered":"RxJs share and shareReplay operators"},"content":{"rendered":"\n

Last week, we covered the difference between hot and cold Observables<\/a> in RxJs.<\/p>\n\n\n\n

Today, let’s talk about how we can make a cold Observable hot. Why would we want that? Say our Observable is an HTTP request we want to trigger before any component subscribes to it. We saw that Observables from the HttpClient<\/code> are cold, meaning that they only start fetching data when a subscriber comes over.<\/p>\n\n\n\n

By making the Observable hot, the HTTP request would get triggered immediately. The share<\/a><\/code> operator would do exactly that for us:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Under the hood, share turns our Observable into a Subject<\/a>, which can handle multiple subscribers and is hot by default.<\/p>\n\n\n\n

The only problem with the above example is that the data could be emitted before any subscriber gets the chance to subscribe to that new hot Observable.<\/p>\n\n\n\n

As a result, it makes more sense to use shareReplay<\/a><\/code> instead as it’s going to replay the latest value(s) to any new subscriber (just like a ReplaySubject<\/code>):<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This code is much better because:<\/p>\n\n\n\n