What is the advantage of using the async pipe over .value for BehaviorSubject in Angular templates?

Question

It is said that using .value on a BehaviorSubject is always a red flag, that something is not right with your code. Why is that? Let's say you have a BehaviorSubject:

isOpen$ = new BehaviorSubject<boolean>(false);

And so you could control the display of an element in the dom like that:

<div *ngIf="{{isOpen$ | async}}">Some Content</div>

Why not just use the .value? You could avoid the subscription altogether?

<div *ngIf="{{isOpen$.value }}">Some Content</div>

Answer 1

The async pipe in angular will subscribe to an Observable or Promise and return the latest value it has emitted. Whenever a new value is emitted from an Observable or Promise, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Answer 2

If you use .value on a BehaviorSubject it means that you bailout from rxjs world and use BehaviorSubject just like any other plain variable, in other words you are mixing two approaches reactive vs imperative.