2

I have an angular (9) component which gets BehaviourSubjects. I learn from many sources like this to use the async-pipe when displaying observables content (instead of subscribing it in ngInit). There's also the trick, using *ngIf* with as to not repeat it all the time. But since they are BehaviourSubjects after all, I could could simply do

<div>{{behaviourSubject.getValue()}}</div>

or whatever. Actually it's seems much cleaner to me then using 'async' and practically leads to less problems here and there. But I am nor sure if this is an okay pattern or has it serious disadvateges?

Paflow
  • 2,030
  • 3
  • 30
  • 50
  • 1
    If you want to update template elements based on that variable updates (suchs as, for example, a shopping cart badge), you need use the `async` subscription. Otherwise, I don't see a problem on just retrieving the object. – Sergio May 22 '20 at 10:35
  • I have never seen this pattern in use before, and it has some disadvantages. Still, it might actually work ok in some situations, but my recommendation would be not to do this. – SnorreDan May 22 '20 at 10:40

4 Answers4

6

I'd refer you to Ben Lesh's (author of RxJS) answer on this topic here

99.9% of the time you should NOT use getValue()

There are multiple reasons for that...

  • In Angular, you won't be able to use the OnPush ChangeDetectionStrategy. Not using it makes your app slower because Angular will constantly try to sync the value with the cached view value. In your case, it even needs to call the getValue function first.
  • When the BehaviourSubject errors or completes you'll not be able to call getValue.
  • Generally the use of getValue, and I'd argue even BehaviourSubject, is not necessary, because you can express most Observables by only using pipeable operators on another source Observable. The only real place where Subjects are necessary is when you need to convert an otherwise unobservable event to an Observable.

While it might look cleaner not to use async, you're actually moving the hard work to Angular which needs to do figure out when it should call getValue().

ggradnig
  • 13,119
  • 2
  • 37
  • 61
  • Thank you, this is merely what I was wondering about "n Angular, you won't be able to use the OnPush ChangeDetectionStrategy." I will try to find another solution. – Paflow May 25 '20 at 08:23
  • best answer on topic. thanks for explanation! – Dario Mar 14 '23 at 11:46
3

BehaviorSubject often live inside services in order to dispatch new values to other services/components to keep them up to date.

A good practice is to declare the BehaviorSubject as private and to only exposes him .asObservable(), so consumers aren't allowed to change its value directly.

That's why we have to use the async pipe on the provided observable source.

Second reason: async pipes are automatically unsubscribing from the observables they're fed with. [Edition]: as the comparison is with .getValue() which provide the value of the subject without the need to subscribe, there is no explicit benefit of the pipe of a subject in this use case.

Gérôme Grignon
  • 3,859
  • 1
  • 6
  • 18
2

Calling methods within templates expressions would be the first thing you would want to avoid in Angular.It is considered bad practice to call a method within the template.Click here for more information around that.

As Gerome mentioned, it would be a right approach to expose behaviour subject as an observable and subscribing to it within the template using async pipe, and since its a behaviour subject, it will always have latest values emitted as well on subscription, hence you can avoid using getValue() method as well.

Shijil Narayanan
  • 1,011
  • 8
  • 21
0

If your property is of BehaviourSubject type it's totally fine to use getValue() in the template. The difference between getValue() and | async as value is that getValue() is called every time of change detection to detect rerender case, but because there's nothing behind than return this._value it's totally fine.

satanTime
  • 12,631
  • 1
  • 25
  • 73