RxJs Operators - zip, combineLatest, withLatestFrom, forkJoin

RxJs Operators - zip, combineLatest, withLatestFrom, forkJoin

by ayyanarj

HTML

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>
<input type="text" id="text1">
<input type="button" id="button1" value="Obs 1">
<input type="button" id="complete1" value="Complete 1">
<br>
<br>
<input type="text" id="text2">
<input type="button" id="button2" value="Obs 2">
<input type="button" id="complete2" value="Complete 2">

JavaScript

var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');

var complete1 = document.querySelector('#complete1');
var complete2 = document.querySelector('#complete2');

var text1 = document.querySelector('#text1');
var text2 = document.querySelector('#text2');

var button1Event = Rx.Observable.fromEvent(button1, 'click');
var button2Event = Rx.Observable.fromEvent(button2, 'click');

var complete1Event = Rx.Observable.fromEvent(complete1, 'click');
var complete2Event = Rx.Observable.fromEvent(complete2, 'click');

button1Event.subscribe(buttonEvent => {
 sub1.next(text1.value);
});
button2Event.subscribe(buttonEvent => {
 sub2.next(text2.value);
});


complete1Event.subscribe(buttonEvent => {
 sub1.complete();
});
complete2Event.subscribe(buttonEvent => {
 sub2.complete();
});

var sub1 = new Rx.Subject();
var sub2 = new Rx.Subject();

var zipObs = Rx.Observable.zip(sub1, sub2);

var combinedLatestObs = Rx.Observable.combineLatest(sub1, sub2);

var withLatestFromObs = sub1.withLatestFrom(sub2);

var forkJoinObs = Rx.Observable.forkJoin(sub1, sub2);

zipObs.subscribe(([sub1Value, sub2Value]) => {
  console.log('Zip Values: ');
	console.log('Text 1 Value: ', sub1Value);
  console.log('Text 2 Value: ', sub2Value);
});


combinedLatestObs.subscribe(([sub1Value, sub2Value]) => {
  console.log('combineLatest operator Values: ');
	console.log('Text 1 Value: ', sub1Value);
  console.log('Text 2 Value: ', sub2Value);
});


withLatestFromObs.subscribe(([sub1Value, sub2Value]) => {
  console.log('withLatestFrom operator Values: ');
	console.log('Text 1 Value: ', sub1Value);
  console.log('Text 2 Value: ', sub2Value);
});



forkJoinObs.subscribe(([sub1Value, sub2Value]) => {
  console.log('forkJoin operator Values: ');
	console.log('Text 1 Value: ', sub1Value);
  console.log('Text 2 Value: ', sub2Value);
});