Service without observables

Question

I am struggling to understand , why i need to use observable. I have a very simple store like below

@Injectable({
  providedIn: 'root'
})
export class DataService {   

  private readonly personData: Person   = new Person();
  constructor() {
  }

  public getPerson():Person{
    return this.personData;
  }    
  public setAge(age:number){
    this.personData.age = age;
  }
}

this above service works just fine and exactly same if I were to use observable

@Injectable({
  providedIn: 'root'
})
export class DataService {

  // @ts-ignore
  private readonly personData: BehaviorSubject<Person> = new BehaviorSubject<Person>({});

  public personData$: Observable<Person> ;

  constructor() {
    this.personData$ = this.personData.asObservable();
  }

  public getPerson():Person{
    return this.personData.getValue();
  }

  public setAge(age:number){
    this.getPerson().age = number;
  }
}

My question is , why would I use observable , the simple service property is working just fine! Or I am missing the big picture! Please help me to understand.

In your example you don't need Observables because data is immediately available. Use Observables when you don't know when data is returning. — JWP, Aug 09 '20 at 01:57
Think of a scenario where you want to do something when the value of your Person changes, in that case, using an Observable becomes useful because you can register callbacks (subscribe) and whenever you get a new Person value your callbacks can get executed, it allows you to listen to change events and react to them (In your examples it makes no difference whatsoever because you are never calling ```this.personData.next(value)``` — h0ss, Aug 09 '20 at 02:16

score 4 · Answer 1 · answered Aug 09 '20 at 04:21

Observables are useful when you want to share the same data with multiple components since they can all subscribe to the same source and keep getting the latest updated data. For basic use cases, this is may not seem useful, but in large projects it certainly is.

They're also very useful when optimizing angular's change detection using the OnPush detection strategy. An observable can tell the view that it has been updated, so the view should be updated as well. Async pipe

So if you're not using the OnPush detection strategy, or your project is pretty basic in its functionality, you may not really need observables, but since they're extremely useful, and to be honest, kinda hard to work with, I'd say use them anyway if for nothing but learning. They give you a new way of thinking about things. Lookup "Reactive Programming".

score 2 · Answer 2 · answered Aug 09 '20 at 01:54

Observables provide support for passing messages between parts of your application. They are used frequently in Angular and are the recommended technique for event handling, asynchronous programming, and handling multiple values.

for further understanding, this will help https://angular.io/guide/observables

score 2 · Answer 3 · answered Aug 09 '20 at 04:04

services are abstraction for how you get the data into components and use or render the data.
Usually a service might get data (here person data) by making a http request to the backend.
In such a case the data won't be available immediately for synchronous use. This is where the async observables step in. You make a http request to backend to get data and return this observable which will be subscribed to by the component and used when data is available.
consider an another scenario where the value of person data is constantly changing and you need to update the view accordingly. to make this work synchronously you might have to poll for person data and if changed update the view (Bad). Consider using observables, here angular will detect when an observable as emitted a value and updates the view!!!.
Consider point 4 in terms of multiple components getting data from this service method
Don't forget to check out async pipe of angular

score 1 · Accepted Answer · answered Aug 09 '20 at 04:27

In your case, Observables are not required as you are returning a locally initialized variable and there are no asynchronous operations happen. However, most of the time services return data that fetched from API.

So let's say you have an Angular component that shows some returned data from an API when clicking on a button.

You will click on that button and call getPersonFromAPI() function.

The function will do Http Request to the API. But wait, when we don't use Observables, the caller will expect the data immediately. But the function getPersonFromAPI() cannot return them immediately as it will WAIT for the response from the API. So we are WAITING something to be DONE.

When we return Observable we inform the caller that, Hey, please wait! there is something happening now. If you want to be informed when I am done, plesae Subscribe me and I will inform you as soon as I get the data.

Service without observables

4 Answers4