Angular-RxJS | Sample Angular application that uses RxJS | Reactive Programming library

I am having trouble getting the sum (or any reduction) of an inner number property of an Observable within another Observable.

I have an Observable array of "Account" objects (Observable).

I am working on an Angular 9, RxJS 6 app and have a question regarding the different outcomes of piping subject values and doing unit conversion in that pipe.

Please have a look at this stackblitz. There, inside the backend.service.ts file, an observable is created that does some "unit conversion" and returns everything that is emmitted to the _commodities Subject. If you look at the convertCommodityUnits function, please notice that I commented out the working example and instead have the way I solved it initially.

My question: When you use the unsubscribe buttons on the screen and subscribe again, when using the "conversion solution" that just overrides the object without making a copy, the values in the HTML are converted multiple times, so the pipe does not use the original data that the subject provides. If you use the other code, so creating a clone of the commodity object inside convertCommodityUnits, it works like expected.

Now, I don't understand why the two ways of converting the data behave so differently. I get that one manipulates the data directly, because js does Call by sharing and one returns a new object. But the object that is passed to the convertCommodityUnits function is created by the array.prototype.map function, so it should not overwrite anything, right? I expect that RxJS uses the original, last data that was emitted to the subject to pass into the pipe/map operators, but that does not seem to be the case in the example, right?

How/Why are the values converted multiple times here?

This is more or less a follow-up question on this: Angular/RxJS update piped subject manually (even if no data changed), "unit conversion in rxjs pipe", so it's the same setup.

I want to pass URL besides getting its response data in next pipable operator of RxJS. What do you think is the smartest way to achieve this? Thanks in advance.

Here is an example. https://stackblitz.com/edit/angular-rxjs-passing-data-to-next-operator-question

I tried some operators, but I couldn't find right one. (Actually, I don't even know why passing function which returns observable to mergeMap results in getting data as parameter of function in next operator...)

I'm using an image API to pull some image information and I want to create an array with unique author names for each image returned. I'm using the distinct RxJS to try to do this, but right now the entire objects are being returned.

Here's what the API data comes back looking like:

I am working on angular app where I am able to sort data in ascending and descending order.Though everything is working fine I want to optimise my code so that I don't repeat myself and write an efficient code.

Here is my sample data in console sample data in console

I have array of object where I want to sort data in ascending and descending order of onclick.Everytime I am calling a function for every field.Is there a better way to do it

Here is my code

data.ts

I've been looking around for a simple way to avoid the memory leaks I've read about caused by failing to unsubscribe. Most of the time I'm just wanting the ONE response from my backend. And then I'll want to unsubscribe. So why not call it in the callback?

I have working angular code which merges two API results where the second call is dependent on the first. It's a simple join operation:

I came across this answer Angular/RxJs When should I unsubscribe from `Subscription` on how to stop a subscription using takeUntil(). The answer also states that

The secret sauce (as noted already by @metamaker) is to call .takeUntil(this.ngUnsubscribe) before each of our .subscribe() calls which will guarantee all subscriptions will be cleaned up when the component is destroyed.

I am however having problems understanding why one of my two examples does not stop the subscription. Here is a working example

My Service:

I have two observables. First observable is used for ngIf-Block Statement. Second observable is used inside the ngIf-Block and maps values from first observable.

The second observable do not get the first update from source inside the ngIf-Block. On otherhand, outside of ngIf-Block it works.

Any explanations for this unexpected behavior?

Example: https://stackblitz.com/edit/angular-rxjs-template-update-problem