Commit 36335da9 authored by micha's avatar micha
Browse files

progress

parent edec7c53
......@@ -56,70 +56,30 @@ Following episode details are assumed:
```
libs
└───episode-one
│ │ README.md
│ │ ...
│ └───src
│ └───lib
│ │ index.ts
│ │ episode-one.routes.ts
│ │ episode-one.module.ts
│ │ episode-one.menu.ts
│ │ …
│ └───exercise
│ │ episode-one.theory.md
│ │ episode-one.exercise.md
│ │ episode-one.solution.md
│ │ episode-one.exercise.component.ts
│ │ episode-one.solution.component.ts
│ │ …
│ └───assets
│ │ slides.pdf
│ │ episode-one.theory.mp4
│ │ episode-one.exercise.mp4
│ │ episode-one.solution.mp4
│ │ …
│ └───images
│ image-one.png
│ image-two.png
│ …
└───episode-two
└───episode-three
└───...
```
## `exercise` folder
### `episode-one.theory.ts`
# Course/Series Structure:
Following course/series details are assumed:
**course-one structure**
```
apps
└───course-one
│ │ README.md
│ │ ...
│ └───src
│ └───app
│ │ app.module.ts
│ │ app.routes.ts
│ │ app.menu.ts
│ │ app.component.ts
│ │ ...
│ └───assets
│ course-one.heading.png
│ …
└───course-two
└───course-three
└───projects
├── episode-1
│ ├── src
│ │ ├── lib
│ │ ├── docs
│ │ │ ├── assets
│ │ │ │ └── images
│ │ │ │ ├── img1.png
│ │ │ │ └── img2.png
│ │ │ └── episode-1.overview.md
│ │ ├── exercises
│ │ │ ├── session-1
│ │ │ │ ├── docs
│ │ │ │ │ ├── assets
│ │ │ │ │ │ └── images
│ │ │ │ │ │ ├── img1.png
│ │ │ │ │ │ └── img2.png
│ │ │ │ │ ├── session-1.tyeory.md
│ │ │ │ │ ├── session-1.exercise.md
│ │ │ │ │ └── session-1.solution.md
│ │ │ └── session-[n]
│ │ ├── episode-1.component.ts
│ │ ├── episode-1.menu.ts
│ │ ├── episode-1.routes.ts
│ │ └── episode-1.module.ts
└───...
```
TODO:
Content für ersten 3 Kapitel (bis einschließlich Top 10 Operatoren)
Operators:
# Combination operators comparison - Exercise
## Intro
In the start component you will find a screen split into 2 sections.
Left and right. In the center
we have 3 boxed displaying the result of the named strategies combine, withLatest and zip.
```html
<h1>Comparison combination operators</h1>
<div #box class="box">
<div class="click-area"></div>
<div class="separation"></div>
<div class="click-pos">&nbsp;</div>
<div class="click-result">
combine
{{clickResultCombine$ | async}}
</div>
<div class="click-result">
withLatest
{{clickResultWithLatest$ | async}}
</div>
<div class="click-result">
zip
{{clickResultZip$ | async}}
</div>
</div>
```
Also, 2 Observables are already setup in the `ngAfterViewInit` hook, `clickPosX$` and `elemWith$`.
```typescript
ngAfterViewInit(): void {
const clickPosX$ = fromEvent(this.boxViewChild.nativeElement, 'click').pipe(
tap((e: any) => {
const elem = this.elemRef.nativeElement.querySelector('.click-pos');
elem.style.top = `${e.offsetY - 15}px`;
elem.style.left = `${e.offsetX - 15}px`;
elem.style.display = 'block';
}),
map((e) => e['offsetX'])
);
this.subscription.add(
clickPosX$.subscribe(cPX => console.log('clickPosX', cPX))
);
const elemWith$ = fromEvent(window, 'resize').pipe(
map(() => this.boxViewChild.nativeElement.getBoundingClientRect().width)
);
this.subscription.add(
elemWith$.subscribe(w => console.log('elemWith', w))
);
}
```
They are already subscribed to and will forward the with of our click container, and the other Observable logs the the click position.
A small helper function `getSideOfClick` is provided.
```typescript
getSideOfClick(posX: number, width: number): string {
return (width / 2) < posX ? 'Right' : 'Left';
}
```
It takes the click position and the with of the element and calculates if the click happend ant the right or left section of the container.
## Exercise
Create an Observable with that calculates the side of the click.
Use the listed operators:
- `combineLatest`
- `combineLatestWith`
- `zip`
- `zipWith`
- `withLatestFrom`
Resize and click and see how the different operators behave.
Explain the different behaviours
# Combination Operators Comparison - Solution
**Component**
```Typescript
```
......@@ -25,3 +25,64 @@ In version `7` of RxJS there was a refactoring.
The operator versions of `zip` and `combineLatest` got deprecated and the
new operators `zipWith` and `combineLatestWith` got introduced.
Let's have a look at their usage.
**combineLatest and combineLatestWith**
```typescript
import {combineLatest, interval} from 'rxjs';
import {combineLatestWith} from 'rxjs/operators';
const source1$ = interval(1000);
const source2$ = interval(500);
const result1$ = combineLatest([source1$,source2$]);
const result2$ = source1$.pipe(
combineLatestWith(source2$)
);
```
This 2 operators are siblings, one of them, `combineLates` is the creation function.
The other, `combineLatestWith` is the operator.
**zip and zipWith**
```typescript
// rxjs version 7
import {zip, interval} from 'rxjs';
import {zipWith} from 'rxjs/operators';
const source1$ = interval(1000);
const source2$ = interval(500);
const result1$ = zip([source1$,source2$]);
const result2$ = source1$.pipe(
zipWith(source2$)
);
```
This 2 operators are similar to `combineLatest` siblings,
The creation function is `zip` and the operator is `zipWith`.
**withLatestFrom**
```typescript
// rxjs version 7
import {interval} from 'rxjs';
import {withLatestFrom} from 'rxjs/operators';
const source1$ = interval(1000);
const source2$ = interval(500);
const result1$ = source1$.pipe(
withLatestFrom(source2$)
);
```
For this behaviour we only have the operator.
This creation function would not be that intuitive to use.
To get some more overview of the behaviour lets start a small exercise.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment