updating operators

Author: sumitarora

src/operator-docs/combination/concatAll.ts

@@ -51,7 +51,10 @@ export const concatAll: OperatorDoc = {
           map(ev => interval(1000).pipe(take(4)))
         );
         const firstOrder = higherOrder.pipe(concatAll());
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],

src/operator-docs/combination/forkJoin.ts

@@ -81,7 +81,10 @@ export const forkJoin: OperatorDoc = {
         of(5, 6, 7, 8)
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
@@ -102,7 +105,10 @@ export const forkJoin: OperatorDoc = {
         interval(500).pipe(take(4)) // emit 0, 1, 2, 3 every half a second and complete
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );
@@ -114,13 +120,20 @@ export const forkJoin: OperatorDoc = {
     {
       name: 'Use forkJoin with project function',
       code: `
-      const observable = Rx.Observable.forkJoin(
-        Rx.Observable.interval(1000).take(3), // emit 0, 1, 2 every second and complete
-        Rx.Observable.interval(500).take(4), // emit 0, 1, 2, 3 every half a second and complete
+      import { take } from 'rxjs/operators';
+      import { forkJoin } from 'rxjs/observable/forkJoin';
+      import { interval } from 'rxjs/observable/interval';
+
+      const observable = forkJoin(
+        interval(1000).pipe(take(3)), // emit 0, 1, 2 every second and complete
+        interval(500).pipe(take(4)), // emit 0, 1, 2, 3 every half a second and complete
         (n, m) => n + m
       );
       observable.subscribe(
-        value => console.log(value),
+        value => {
+          const output = \`<h3>$\{value.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        },
         err => {},
         () => console.log('This is how it ends!')
       );

src/operator-docs/combination/merge.ts

@@ -53,7 +53,10 @@ export const merge: OperatorDoc = {
         const clicks = fromEvent(document, 'click');
         const timer = interval(1000);
         const clicksOrTimer = clicks.pipe(merge(timer));
-        clicksOrTimer.subscribe(x => console.log(x));
+        clicksOrTimer.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     },
     {
@@ -68,7 +71,10 @@ export const merge: OperatorDoc = {
         const timer3 = interval(500).pipe(take(10));
         const concurrent = 2; // the argument
         const merged = timer1.pipe(merge(timer2, timer3, concurrent));
-        merged.subscribe(x => console.log(x));
+        merged.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],

src/operator-docs/combination/mergeAll.ts

@@ -45,14 +45,17 @@ export const mergeAll: OperatorDoc = {
         const clicks = fromEvent(document, 'click');
         const higherOrder = clicks.pipe(map((ev) => interval(1000)));
         const firstOrder = higherOrder.pipe(mergeAll());
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     },
     {
       name:
         'Count from 0 to 9 every second for each click, but only allow 2 concurrent timers',
       code: `
-        import { mergeAll, map } from 'rxjs/operators';
+        import { mergeAll, map, take } from 'rxjs/operators';
         import { fromEvent } from 'rxjs/observable/fromEvent';
         import { interval } from 'rxjs/observable/interval';
 
@@ -61,7 +64,10 @@ export const mergeAll: OperatorDoc = {
           map((ev) => interval(1000).pipe(take(10)))
         );
         const firstOrder = higherOrder.pipe(mergeAll(2));
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],

src/operator-docs/combination/pairwise.ts

@@ -44,7 +44,10 @@ export const pairwise: OperatorDoc = {
           return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
         })
       );
-      distance.subscribe(x => console.log(x));
+      distance.subscribe(x => {
+        const output = \`<h3>$\{x.toString()\}<h3>\`;
+        document.getElementById('output').innerHTML = output;
+      });
     `
     }
   ],

src/operator-docs/combination/withLatestFrom.ts

@@ -40,7 +40,10 @@ export const withLatestFrom: OperatorDoc = {
           map(ev => interval(1000).pipe(take(4)))
         );
         const firstOrder = higherOrder.pipe(concatAll());
-        firstOrder.subscribe(x => console.log(x));
+        firstOrder.subscribe(x => {
+          const output = \`<h3>$\{x.toString()\}<h3>\`;
+          document.getElementById('output').innerHTML = output;
+        });
       `
     }
   ],

src/operator-docs/creation/empty.ts

@@ -32,8 +32,14 @@ export const empty: OperatorDoc = {
 
           const observable = empty();
           const subscription = observable.subscribe({
-            next: () => console.log('next'), // does not log anything
-            complete: () => console.log('complete'), // logs 'complete'
+            next: () => {
+              const output = \`<h3>next<h3>\`;
+              document.getElementById('output').innerHTML = output; // does not log anything
+            },
+            complete: () => {
+              const output = \`<h3>complete<h3>\`;
+              document.getElementById('output').innerHTML = output; // logs 'complete'
+            },
           });
       `
     },
@@ -45,8 +51,14 @@ export const empty: OperatorDoc = {
 
         const observable = empty().pipe(startWith('initial value'));
         const subscription = observable.subscribe({
-          next: (val) => console.log(\`next: \${val}\`), // logs 'next: initial value'
-          complete: () => console.log('complete'), // logs 'complete'
+          next: (val) => {
+            const output = \`<h3>next: \${val}\<h3>\`;
+            document.getElementById('output').innerHTML = output;  // logs 'next: initial value'
+          },
+          complete: () => {
+            const output = \`<h3>complete<h3>\`;
+            document.getElementById('output').innerHTML = output; // logs 'complete'
+          },
         });
       `
     },
@@ -65,8 +77,14 @@ export const empty: OperatorDoc = {
           )
         );
         const subscription = result.subscribe({
-          next: (x) => console.log(x), // logs result values
-          complete: () => console.log('complete'), // logs 'complete'
+          next: (val) => {
+            const output = \`<h3>\${val}\<h3>\`;
+            document.getElementById('output').innerHTML = output; // logs result values
+          },
+          complete: () => {
+            const output = \`<h3>complete<h3>\`;
+            document.getElementById('output').innerHTML = output; // logs 'complete'
+          },
         });
       `
     }