Rxjs Update Service Example

by jacobwsmith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.min.js"></script>
Component 1:
<input type="text" value="" id="component1">
<br>
<br> Component 2:
<input type="text" value="" id="component2">

<!--
<br><br>
OUTPUT:
<pre id="output"></pre>
-->

JavaScript

console.clear();

// mimic service
const database$ = Rx.Observable.of('hello from database').delay(1000); 	// database stream: private
const form$ = new Rx.Subject(); 													// form stream: private
const updateForm = function (val) {												// update form: public
  form$.next(val);
}
const data$ = database$.concat(form$);										// data stream: public

// mimic component 1
const component1Element = document.getElementById('component1');
const component1ElementSubscription = Rx.Observable.fromEvent(component1Element, 'keyup')
.map(event => event.target.value)
.subscribe(val => {
  updateForm(val);
});
const component1DataSubscription = data$.subscribe(response => {
  	console.log('component1DataSubscription: ', response);
    component1Element.value = response;
 });

// mimic component 2
const component2Element = document.getElementById('component2');
const component2ElementSubscription = Rx.Observable.fromEvent(component2Element, 'keyup')
.map(event => event.target.value)
.subscribe(val => {
	console.log('component2ElementSubscription: ', val);
  updateForm(val);
});
let component2DataSubscription;
setTimeout(() => {
	component2DataSubscription = data$.subscribe(response => {
  	console.log('component2DataSubscription: ', response);
    component2Element.value = response;
 });
}, 2000);