Why use Observable in Angular instead of object reference

user_6457370 0
Viewed 126

I'm creating an app with a kind of gamefication and every task the user completes I add a string to an array achievements. I was using Observables in my Gamefication service to update the achievements array so the UI would update as well, changing the color of some "achievements badges" The thing is. I realized that if I simply assign an array in my component consuming my service with the reference of the array in the service like this:
gamefication.page.ts

export class GameficationPage implements OnInit {
  
  gameficationCards: GameCard[];

  constructor(private gameficationService: GameficationService) { }

  ngOnInit() {
    this.gameficationCards = this.gameficationService.getAvailableCards();
  }

}

And the service like this: gamefication.service.ts

gameficationCards: string[] = [
'acheivement1',
'achievement2',
...
]
getAvailableCards() {
    return this.gameficationCards;
  }

Whenever I update the gameficationCards array in the service, my page, consuming the gamefication service , and my UI updates as well. I'd like to know why does it work and why should I use an observable for changing values if I can just simply update my array and it will reflect in the UI.

Thank you.

ionic-framework angular
3 Answers

I have created a sample Stackblitz Demo

In your post you have mentioned

Whenever I update the gameficationCards array in the service, my page, consuming the gamefication service

Very true, as long as angular detects a change it will update the UI, so to answer the question why does this work? Simply there was a change in the data and hence need to trigger change detection and update the data

Angular can detect when component data changes, and then automatically re-render the view to reflect that change

Now check the demo I have posted above, I have reproduced your issue with a simple change, I have added

changeDetection: ChangeDetectionStrategy.OnPush

Now the difference is seen... Using function no longer works and the UI is not updated even if the data is updated! So to answer your question

why should I use an observable for changing values if I can just simply update my array and it will reflect in the UI.

then it depends, If you plan on improving the performance of your application using OnPush strategy of change detection, then the better option will be to implement the use of Observable

user_136801150

In your example your app behave in a synchronous way, which does not reflect a real world app. In fact, in your case, you firstly make sure that the gameficationCards array is not empty (by filling it with values), then you try to get its contents in a synchronous workflow.

Two main problems here:

  1. Your array here is filled in client side (which is not, in most cases, a proper way to do so )
  2. Did you think about the case when these achievements would be retrieved from a backend service ? how would you ensure that your array contains values to make your this.gameficationService.getAvailableCards() ?

Answering the second question will lead you to Observables

Hint : javascript's asynchronous behavior.

user_59809930

To answer your question about using observables vs. updating the array which is data bound: the main advantage of using an observable is the fact that you can have it in a service and subscribe to it from different components.

That way, whenever your array changes, you can send it to the observable, and all of its subscribers will be notified of the change and updated.

user_149376720
Related