How to avoid infinite loop while updating self in a BehaviorSubject? - rxjs

Question

Declared like this:
public panel$: BehaviorSubject<any> = new BehaviorSubject<any>(false);
Used like this
togglepanel() {
this.panel$.subscribe(
(x) => {
if (x) {
this.panel$.next(false);
} else {
this.panel$.next(true);
}
});
}
It creates an endless cycle trying to update self.

Answer 1

You can update it by taking only one(latest) value from the panel$ Observable:
this.panel$.take(1).subscribe(...)
But it is better to model your state a bit differently, like this:
// const onToggle$ = new Rx.Subject();
var toggle$ = Rx.Observable.fromEvent(document, 'click');
const initialValue = true;
const state$ = toggle$
.scan(state => !state, initialValue)
.startWith(initialValue);
const htmlSubscription = state$.subscribe(state => {
document.getElementById('toggle').innerText = 'toggle: ' + state;
});
<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>
<button id="toggle">loading...</button>
EDIT:
Angular version of this code is:
public toggle$ = new Subject();
public state$ = this.toggle$.scan(state => !state, true)
.startWith(true)
.subscribe((x) => console.log('x:' + x));
togglepanel() {
this.toggle$.next(null);
}