●

●
import
\ { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

Observable.of(1, 2, 3)
.filter(x => x % 2 === 0)
.map(x => x + x)
.subscribe(x => console.log(x))
import
\ { of } from 'rxjs/observable/of';
import { filter, map } from 'rxjs/operators';

of(1, 2, 3).pipe(
filter(x => x % 2 === 0),
map(x => x + x),
).subscribe(x => console.log(x))
●
○
○
○
●
●
const
\ pow = (p: number) =>
(source: Observable<number>) =>
source.pipe(map(n => n ** p));
const
\ pow = (p: number) =>
(source: Observable<number>) =>
source.pipe(map(n => n ** p));

source$.pipe(
filter(x => x > 100),
pow(3),
).subscribe(x => console.log(x));
class CustomObservable<T> extends Observable<T> {
\ class PowOperator<T, R> implements Operator<T, R> {
pow(p: number) { constructor(private power: number) {}
return this.lift(new PowOperator(p));
} call(subscriber: Subscriber<R>, source: any): any {
return source.subscribe(new PowSubscriber(subscriber,
lift<R>(operator: Operator<T, R>) { this.power));
const result = new CustomObservable<R>(); }
result.source = this; }
result.operator = operator;
return result; class PowSubscriber<T> implements Subscriber<T> {
} constructor(private power: number) {}
}

_next(value: T) {
this.destination.next(value ** this.power);
}
}
●
●
●
●
●
●
●
●
OLD

rethrow synchronously

NEW

rethrow asynchronously
\

badSource$.subscribe(nextFn, null, completeFn);

try
\ {
badSource$.subscribe(nextFn, null, completeFn);
} catch (err) {
handleError(err);
}
try
\ {
badSource$.subscribe(nextFn, null, completeFn);
} catch (err) {
handleError(err);
}
\

badSource$.subscribe(nextFn, handleError, completeFn);

it('should
\ throw something I did not expect' +
'but here I am, testing it anyhow', () => {
expect(badSource$.subscribe())
.toThrowError(Error, 'lol');
});
it('should
\ throw something', (done) => {
badSource$.subscribe({
error(err) {
expect(err).toEqual(jasmine.any(Error));
expect(err.message).toEqual('lol');
done();
}
});
});
/**
\

* Imaginary 3rd party data producer API

*/
interface JeffCrossService {
getAmazingStuff(): Observable<number>
}
@Component(/*...*/)
\

class LadyLeetComponent<T> {
display$ = this.service.getAmazingStuff().pipe(
filter(value => value < 50)
)

constructor(private service: JeffCrossService) {}

}
@Component(/*...*/)
\
class ShaiComponent<T> {
display$ = this.service.getAmazingStuff().pipe(
filter(value => {
if (value === 42) throw Error('haha');
return true;
})
)
constructor(private service: JeffCrossService) {}
}
@Component(/*...*/)
\

class MiskoComponent<T> {
display$ = this.service.getAmazingStuff().pipe(
filter(value => value > 50)
)

constructor(private service: JeffCrossService) {}

}
TItle

Description

●
●
●
●
@Injectable()
\
export class JeffCrossService {
private _stream$ = interval(100).pipe(
map(() => Math.round(Math.random() * 100)),
share()
)

getAmazingStuff() {
return this._stream$;
}
}
●
●

●
●

●
●

●
●

●
●
●

●
●
●
●

●
●
●
●
setTimeout(() => { throw error; }, 0);
●
●
import
\ { config } from 'rxjs';

config.useDeprecatedSynchronousErrorHandling = true;
import { Observable } from 'rxjs/Observable';
\
import 'rxjs/add/observable/interval';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/scan';

Observable.interval(1000)
.filter(x => x % 2 === 0)
.mergeMap(x => Observable.of(x + 1, x + 2, x + 3))
.scan((s, x) => s + x, 0)
.subscribe(x = console.log(x));
import { interval } from 'rxjs/observable/interval';
\
import { of } from 'rxjs/observable/of';
import { filter } from 'rxjs/operators/filter';
import { mergeMap } from 'rxjs/operators/mergeMap;
import { scan } from 'rxjs/operators/scan';

interval(1000).pipe(
filter(x => x % 2 === 0),
mergeMap(x => of(x + 1, x + 2, x + 3)),
scan((s, x) => s + x, 0),
).subscribe(x = console.log(x));
import { interval } from 'rxjs/observable/interval';
\
import { of } from 'rxjs/observable/of';
import { filter, mergeMap, scan } from 'rxjs/operators';

interval(1000).pipe(
filter(x => x % 2 === 0),
mergeMap(x => of(x + 1, x + 2, x + 3)),
scan((s, x) => s + x, 0),
).subscribe(x = console.log(x));
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
● ●
●
● ●
●
● ●
import
\ { interval, of } from 'rxjs';
import { filter, mergeMap, scan } from 'rxjs/operators';

interval(1000).pipe(
filter(x => x % 2 === 0),
mergeMap(x => of(x + 1, x + 2, x + 3)),
scan((s, x) => s + x, 0),
).subscribe(x = console.log(x));
●
●
●
●
●
● rxjs
○ Types
○ Creation methods

○ Schedulers
○ Helpers
● rxjs/operators
○ All operators
●
●
●
import
\ { ArrayObservable } from
'rxjs/observable/ArrayObservable';
import { ScalarObservable } from
'rxjs/observable/ScalarObservable';
import { fromArray } from 'rxjs/observable/fromArray';
import { of } from 'rxjs/observable/of';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
Observable.of('foo');
\
of('foo');
fromArray(['foo']);
new ScalarObservable('foo');
ScalarObservable.create('foo');
new ArrayObservable(['foo']);
ArrayObservable.create(['foo']);
import
\ { of } from 'rxjs';

of('foo');
● ●
● ●
● ●
● ●
●
● ●
● ●
● ●
source.pipe(
\

mergeMap(
(x, i) => range(x, x + 10),
(x, y, i, ii) => x + y
)
)
source.pipe(
\

mergeMap(
(x, i) => range(x, x + 10),
(x, y, i, ii) => x + y
)
)
source.pipe(
\

mergeMap(
(x, i) => range(x, x + 10).pipe(
map((y, ii) => x + y)
)
)
)
a$.pipe(concat(b$,
\ c$));

a$.pipe(merge(b$, c$));

a$.pipe(zip(b$, c$));

a$.pipe(combineLatest(b$, c$));
concat(a$,
\ b$, c$);

merge(a$, b$, c$);

zip(a$, b$, c$);

combineLatest(a$, b$, c$);

●
●
●
●

●
const
\ mustClick$ = buttonClick$.pipe(
takeUntil(this.viewResize$),
throwIfEmpty(
() => new Error('user did not click before resize')
),
);
>
\ yarn add rxjs@rc
>
\ yarn add rxjs@rc

> yarn add rxjs-compat@rc

>
\ yarn add rxjs

> yarn add rxjs-compat

>
\ ng update rxjs
●
●
●

●
●
> yarn add rxjs-tslint
{
"rulesDirectory": ["node_modules/rxjs-tslint"],
"rules": {
"update-rxjs-imports": true,
"migrate-to-pipeable-operators": true,
"collapse-rxjs-imports": true
}
}
> ./node_modules/.bin/tslint -c migrate.tslint.json
--project src/tsconfig.app.json --fix
●
●
○
○
○
●
○
○
○
○
●
●
●
●
●
●