progress

projects/combining-streams/src/lib/exercises/comparison/docs/comparison.theory.md

+# Combination Operators Comparison
 
+As we did quite a lot od technical stuff it's time to relax and do some playful stuff.
+Let's see how the combination operators compare to each other. :)
+ 
 In this exercise we compare the different operators:
 - `combineLatest`
 - `combineLatestWith`
@@ -11,4 +15,12 @@ We exclude `forkJoin` as we will process ongoing streams.
 Also, the operators `zipAll` as well as `combineAll` are left out.
 We will discuss `All` operators in a different chapter.
 
+Let's take a closer look to the used RxJs functions.
+We have 2 different types, operators and creators functions.
+
+The operators of the listed functions always have the following signature:
+`(Observable<T>) => (Observable<R>) => Observable<[T, R]>` 
+
+In version 7 of RxJS there was a refactoring.
+
 

projects/combining-streams/src/lib/exercises/comparison/solution.comparison.component.ts

@@ -3,25 +3,28 @@ import {combineLatest, fromEvent, ReplaySubject, Subscription, zip} from "rxjs";
 import {map, shareReplay, startWith, tap, withLatestFrom} from "rxjs/operators";
 
 @Component({
-  selector: 'withLatestFrom',
-  template: `<h3>(Solution) withLatestFrom</h3>
+  selector: 'solution-comparison',
+  template: `
+    <h1>(Solution) Comparison combination operators</h1>
 
-  <div #box class="box">
-    <div class="separation">
-    </div>
-    <div class="click-result">
-      combineLatest:
-      <b>{{clickResultCombine$ | async}}</b>
-    </div>
-    <div class="click-result">
-      withLatestFrom:
-      <b>{{clickResultWithLatest$ | async}}</b>
-    </div>
-    <div class="click-result">
-      zip:
-      <b>{{clickResultZip$ | async}}</b>
+    <div #box class="box">
+      <div class="click-area"></div>
+      <div class="separation"></div>
+      <div class="click-pos">&nbsp;</div>
+
+      <div class="click-result">
+        combineLatest:
+        <b>{{clickResultCombine$ | async}}</b>
+      </div>
+      <div class="click-result">
+        withLatestFrom:
+        <b>{{clickResultWithLatest$ | async}}</b>
+      </div>
+      <div class="click-result">
+        zip:
+        <b>{{clickResultZip$ | async}}</b>
+      </div>
     </div>
-  </div>
 
   `,
   styleUrls: ['./comparison.component.scss']

projects/combining-streams/src/lib/exercises/comparison/start.comparison.component.ts

@@ -3,28 +3,28 @@ import {fromEvent, ReplaySubject, Subscription} from "rxjs";
 import {map, tap} from "rxjs/operators";
 
 @Component({
-  selector: 'withLatestFrom',
-  template: `<h3>withLatestFrom</h3>
+  selector: 'comparison',
+  template: `
+    <h1>Comparison combination operators</h1>
 
-  <div #box class="box">
-    <div class="click-area"></div>
-    <div class="separation"></div>
+    <div #box class="box">
+      <div class="click-area"></div>
+      <div class="separation"></div>
+      <div class="click-pos">&nbsp;</div>
 
-    <div class="click-pos">&nbsp;</div>
-
-    <div class="click-result">
-      combineLatest
-      {{clickResultCombine$ | async}}
-    </div>
-    <div class="click-result">
-      withLatestFrom
-      {{clickResultWithLatest$ | async}}
-    </div>
-    <div class="click-result">
-      zip
-      {{clickResultZip$ | async}}
+      <div class="click-result">
+        combineLatest
+        {{clickResultCombine$ | async}}
+      </div>
+      <div class="click-result">
+        withLatestFrom
+        {{clickResultWithLatest$ | async}}
+      </div>
+      <div class="click-result">
+        zip
+        {{clickResultZip$ | async}}
+      </div>
     </div>
-  </div>
   `,
   styleUrls: ['./comparison.component.scss']
 })

projects/combining-streams/src/lib/exercises/withLatestFrom/solution.withLatestFrom.component.ts

@@ -4,7 +4,7 @@ import {filter, map, shareReplay, take, withLatestFrom} from 'rxjs/operators';
 import { BlogBasicService, BlogPost, toBlogPosts } from 'shared';
 
 @Component({
-  selector: 'solution-opt-in-updates-basic',
+  selector: 'solution-with-latest-from',
   template: `
     <h1>(Solution) with-latest-from</h1>