BehaviorSubject
💡 If you want the last emitted value(s) on subscription, but do not need to supply a seed value, check out ReplaySubject instead!
// RxJS v6+
import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject(123);
// two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);
// two subscribers will get new value => output: 456, 456
subject.next(456);
// new subscriber will get latest value (456) => output: 456
subject.subscribe(console.log);
// all three subscribers will get new value => output: 789, 789, 789
subject.next(789);
// output: 123, 123, 456, 456, 456, 789, 789, 789
// RxJS v6+
import { BehaviorSubject, fromEvent, interval, merge } from 'rxjs';
import { map, tap, mergeMap } from 'rxjs/operators';
const setElementText = (elemId, text) =>
(document.getElementById(elemId).innerText = text.toString());
const addHtmlElement = coords =>
(document.body.innerHTML += `
<div
id=${coords.id}
style="
position: absolute;
height: 30px;
width: 30px;
text-align: center;
top: ${coords.y}px;
left: ${coords.x}px;
background: silver;
border-radius: 80%;"
>
</div>`);
const subject = new BehaviorSubject(0);
const click$ = fromEvent(document, 'click').pipe(
map((e: MouseEvent) => ({
x: e.clientX,
y: e.clientY,
id: Math.random()
})),
tap(addHtmlElement),
mergeMap(coords => subject.pipe(tap(v => setElementText(coords.id, v))))
);
const interval$ = interval(1000).pipe(
tap(v => subject.next(v)),
tap(v => setElementText('intervalValue', v))
);
merge(click$, interval$).subscribe();
- 📰 - Official docs
Last modified 2yr ago