Using pure Observable vs array (from subscribe)


Hey, i was wondering about best practices regard using pure observable vs subscribe to an observable and use an array.

option 1 - "pure observable"
this.schoolObserve = this.angularFire.database.list( and then in the HTML async pipe (and rxjs operators for handling the data)

option 2 - "subscribe to an array"
this.angularFire.database.list( (response => and then treat it as a normal array.


i do not used async pipe in any case. I would prefer option 2 --> prepare your data in TS code so your template can simply consume them to display data. No magic!

I do not like it, that there is something like an async pipe ^^.


First of all thanks for the quick response! (:

i could prepare the data using the rxjs operators… the question is if there is advantage (or disadvantage) to one method over the other…


i think the only advantage of async pipe is, that the running subscription is unsubscribed automatically by leaving the route/component.

But advantage of option 2:

  • any datatransformation takes place in the component class (and not in some parts in the class and the template)
  • better maintainable
  • less logic in templates
  • you know, what you need to do with observables --> like unsubscribing in ngOnDestroy hook
  • i think it is the more cleaner way


Hey Bengtler, i got contradicting answer in stackoverflow.
would you be so kind and check what make more sense?


We also discussed this question and decided for option 2.

Mainly because data often needs to be sorted in different orders.
Arrays are easy sortable, and as far as I know, the orderBy pipe has been dropped.


like i said it is only my opinion. I do want as less logic in my templates as possible. I do not want to look in html code if something does not work with my observable.

Like urm47 says you often need to transform your results or you want to store them in a service to reuse the data and so on.

You should try both and use this, what feels better to you or fit your requirements best.