Sunday, February 10, 2019

My favorite trick in Angular / RxJS

I really love Andular and TypeScript in general, and love to work with Observables.
Observables, however, can be very hard to get done correctly, which obviously needs a lot of debugging. But how?
There are plenty of options for that, for example subscribing to an observable. This might be ok, but is a bit tedious, and doesn't tell you, if there are actually other objects subscribing to it (Subscribers). And, in my experience, is usually one of the most frequent problem by using Observables.

BUT! There is a neat way of checking if your Observable actually has subscribers or not.
Let me tell you about an RxJS operator: tap. I quote from learnrxjs.io:
Transparently perform actions or side-effects, such as logging.
What that means is that this operator does not mutate the values emitted from the Observable, this is just having a sneak peak at the values. This is very good for you to log something there and check if the Observable works.

In summary: as you could see from these 2 examples, you can debug Observables in an Angular project with many ways, but my experience told me to use the tap(console.log) "trick", because then I'm not explicitly subscribing to the Observable, rather just listening and peaking if there is someone who actually would like to subscribe for changes. Cheers!