4

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!!

Web Dev
  • 2,677
  • 2
  • 30
  • 41
  • 1
    `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. –  Aug 10 '18 at 11:55
  • 1
    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: http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject – Sjoerd Aug 10 '18 at 11:55
  • 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? – Web Dev Aug 10 '18 at 12:13

1 Answers1

4

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

  1. I must have an initial Value
  2. 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

Nico
  • 1,961
  • 17
  • 20
  • Thanks for a concise and detailed answer! Just to double check - in my case, Component 2 is an Observer of Observable from Service 2, right? So in this case, the Service 2 Subject has 2 observers - itself and Component 2, correct? – Web Dev Aug 10 '18 at 12:28
  • No problem i'm glad it help! For your question i can only see 1 subscribe which is in `Component 2` that means only one person observering. Your service has the observer but your components are observering. Take it like this. When you go to the movies you are watching the movie (Component) while the cinema has the movie and is updating it as you watch (Service) – Nico Aug 10 '18 at 12:37
  • I hope you understood! my bad analogy :) – Nico Aug 10 '18 at 13:11