From 135809322ba8f79a9208d4fc8e4e7d9bc73177fe Mon Sep 17 00:00:00 2001
From: sumitarora <er.sumitarora@gmail.com>
Date: Fri, 23 Feb 2018 02:49:17 -0500
Subject: [PATCH] updating operators

---
 src/operator-docs/combination/concatAll.ts    |  5 +++-
 src/operator-docs/combination/forkJoin.ts     | 25 ++++++++++++----
 src/operator-docs/combination/merge.ts        | 10 +++++--
 src/operator-docs/combination/mergeAll.ts     | 12 ++++++--
 src/operator-docs/combination/pairwise.ts     |  5 +++-
 .../combination/withLatestFrom.ts             |  5 +++-
 src/operator-docs/creation/empty.ts           | 30 +++++++++++++++----
 7 files changed, 72 insertions(+), 20 deletions(-)

diff --git a/src/operator-docs/combination/concatAll.ts b/src/operator-docs/combination/concatAll.ts
index 9c7fe6c6..403e7c15 100644
--- a/src/operator-docs/combination/concatAll.ts
+++ b/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;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/combination/forkJoin.ts b/src/operator-docs/combination/forkJoin.ts
index d50211c9..0542accf 100644
--- a/src/operator-docs/combination/forkJoin.ts
+++ b/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!')
       );
diff --git a/src/operator-docs/combination/merge.ts b/src/operator-docs/combination/merge.ts
index 577db94f..4ab3ef7e 100644
--- a/src/operator-docs/combination/merge.ts
+++ b/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;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/combination/mergeAll.ts b/src/operator-docs/combination/mergeAll.ts
index bd04228b..c8facf5a 100644
--- a/src/operator-docs/combination/mergeAll.ts
+++ b/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;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/combination/pairwise.ts b/src/operator-docs/combination/pairwise.ts
index bd17b600..9879752d 100644
--- a/src/operator-docs/combination/pairwise.ts
+++ b/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;
+      });
     `
     }
   ],
diff --git a/src/operator-docs/combination/withLatestFrom.ts b/src/operator-docs/combination/withLatestFrom.ts
index 781ca655..44304bff 100644
--- a/src/operator-docs/combination/withLatestFrom.ts
+++ b/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;
+        });
       `
     }
   ],
diff --git a/src/operator-docs/creation/empty.ts b/src/operator-docs/creation/empty.ts
index d266ceea..d1a733ad 100644
--- a/src/operator-docs/creation/empty.ts
+++ b/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'
+          },
         });
       `
     }