RxJS & Angular 6 - observables, subjects and basic get and add operations on arrays

Question

I'm struggling to wrap my head around observables/observers/subjects and angular. I've looked through a number of tutorials covering observable basics and the basic subscription scenario makes sense. These tutorials do not seem to cover adding to observable collections however. Most of them also seem to focus on using the HttpClient, whereas I am trying to mock up some data without relying on a web service - just a basic in-memory array of objects for testing.

I've created a simple application to showcase my confusion.

Component 1 and Service 1 showcase a basic non-observable way of getting a collection of numbers and adding new numbers. Component 2 and Service 2 showcase a somewhat observable way of getting data and automatically getting updates due to subscription. I am using a Subject to do that.

https://github.com/rpasechnikov/observable-test-app

Would anyone be able to point out whether I am on the correct path or am I completely misunderstanding the observable pattern? Do I need to use a Subject here or should I be able to stick to Observables? If so - how do I raise a next() notification from that? On top of that, does anyone have any ideas on why is the first this.subject.next() not trigger an update, whereas further calls do?

Thanks heaps!!

this.subject.next() doesn't trigger an event because it is ran before the subscription and subjects don't return the first value. Consider using a BehaviorSubject to resolve that. About adding, you're adding into an array and pushing another one. Consider pushing your changes if you want to see them in your subscriptions. — user4676340
You normally would use an observable when you want a part of code react to an event. Looking at your code you should have a service, a message/event sender and a message/event receiver. I recognize the service and sender but not the receiver. I find the following very clear on how to use Subjects: jasonwatmore.com/post/2018/06/25/… — Sjoerd
Thanks a lot for the advice! I've updated the sample code with BehaviorSubject and all seems to work well now. Makes sense about next() not firing now. Thanks for the article link as well - reading now :) Can I ask on when would I be using a plain observable then? It always puzzled me how examples created observable from a HttpClient GET. How would any new items ever make their way into Observable, if the HttpClient GET isn't called again? Does that simply suggest that this is a starting point and that we can poll HttpClient GET on a timer and notify clients of any new values then? — Ross

Nico Nico · Accepted Answer · 2018-08-10T12:16:00

The concept of using Observables can be easily misunderstood since there are many things to look at all at once!!!

However you should not be alarmed as they aren't as bad as you might expect.

You are using a special type of Observable one that is both an Observer and an Observable amongst other things such as multicasting.

Observer: You use me when you want to update the observable stream via next

Observable: You use me when you want to get values from the observable stream via subscribe

Ben Lesh gave a talk on Subjects

In your case (Service 2 on your github) you are using a Subject. Which means if I have no observers (someone has subscribed to me) to before my stream is updated via next that person will not get the value.

You can try to use a BehaviorSubject. Which the main difference is

I must have an initial Value
Whenever someone subscribes to me they will always get the latest value regardless if it before or after i am updated.

Give it a try!

Hope this helps

RxJS & Angular 6 - observables, subjects and basic get and add operations on arrays

1 Answers