From 380e3bc044540472e523d59d7412de80e40635e9 Mon Sep 17 00:00:00 2001 From: btroncone Date: Fri, 27 Jul 2018 09:37:40 -0400 Subject: [PATCH] feat(operators): update examples to rxjs 6 --- SUMMARY.md | 197 ++++++++++---------- operators/README.md | 177 +++++++++--------- operators/combination/combineall.md | 1 + operators/combination/combinelatest.md | 33 ++-- operators/combination/concat.md | 39 ++-- operators/combination/concatall.md | 32 ++-- operators/combination/forkjoin.md | 41 ++-- operators/combination/merge.md | 28 +-- operators/combination/mergeall.md | 30 ++- operators/combination/pairwise.md | 15 +- operators/combination/race.md | 19 +- operators/combination/startwith.md | 34 ++-- operators/combination/withlatestfrom.md | 24 ++- operators/combination/zip.md | 30 ++- operators/complete.md | 159 ++++++++-------- operators/conditional/defaultifempty.md | 12 +- operators/conditional/every.md | 12 +- operators/creation/README.md | 31 +-- operators/creation/create.md | 20 +- operators/creation/empty.md | 17 +- operators/creation/from.md | 38 ++-- operators/creation/fromevent.md | 17 +- operators/creation/frompromise.md | 63 ------- operators/creation/interval.md | 11 +- operators/creation/of.md | 21 ++- operators/creation/range.md | 9 +- operators/creation/throw.md | 15 +- operators/creation/timer.md | 21 ++- operators/error_handling/catch.md | 26 +-- operators/error_handling/retry.md | 17 +- operators/error_handling/retrywhen.md | 21 +-- operators/filtering/audittime.md | 2 +- operators/filtering/debounce.md | 16 +- operators/filtering/debouncetime.md | 6 +- operators/filtering/distinctuntilchanged.md | 10 +- operators/filtering/filter.md | 15 +- operators/filtering/first.md | 48 +++-- operators/filtering/ignoreelements.md | 25 ++- operators/filtering/last.md | 50 ++--- operators/filtering/sample.md | 41 ++-- operators/filtering/single.md | 11 +- operators/filtering/skip.md | 32 ++-- operators/filtering/skipuntil.md | 10 +- operators/filtering/skipwhile.md | 9 +- operators/filtering/take.md | 49 +++-- operators/filtering/takeuntil.md | 37 ++-- operators/filtering/takewhile.md | 27 +-- operators/filtering/throttle.md | 28 +-- operators/filtering/throttletime.md | 21 ++- operators/multicasting/multicast.md | 14 +- operators/multicasting/publish.md | 7 +- operators/multicasting/share.md | 13 +- operators/multicasting/sharereplay.md | 10 +- operators/transformation/buffer.md | 4 +- operators/transformation/buffercount.md | 4 +- operators/transformation/buffertime.md | 7 +- operators/transformation/buffertoggle.md | 3 +- operators/transformation/bufferwhen.md | 3 +- operators/transformation/concatmap.md | 9 +- operators/transformation/concatmapto.md | 7 +- operators/transformation/exhaustmap.md | 8 +- operators/transformation/expand.md | 4 +- operators/transformation/groupby.md | 3 +- operators/transformation/map.md | 6 +- operators/transformation/mapto.md | 6 +- operators/transformation/mergemap.md | 12 +- operators/transformation/partition.md | 8 +- operators/transformation/pluck.md | 2 + operators/transformation/reduce.md | 12 +- operators/transformation/scan.md | 34 ++-- operators/transformation/switchmap.md | 54 +++--- operators/transformation/window.md | 12 +- operators/transformation/windowcount.md | 10 +- operators/transformation/windowtime.md | 10 +- operators/transformation/windowtoggle.md | 13 +- operators/transformation/windowwhen.md | 11 +- operators/utility/delay.md | 25 ++- operators/utility/delaywhen.md | 8 +- operators/utility/dematerialize.md | 4 +- operators/utility/do.md | 3 +- operators/utility/let.md | 9 +- operators/utility/timeout.md | 3 +- operators/utility/topromise.md | 5 +- 83 files changed, 1064 insertions(+), 926 deletions(-) delete mode 100644 operators/creation/frompromise.md diff --git a/SUMMARY.md b/SUMMARY.md index 2083d378..66d88481 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -2,102 +2,101 @@ ### Learn RxJS -* [Operators](/operators/README.md) - * [Combination](/operators/combination/README.md) - * [combineAll](/operators/combination/combineall.md) - * [combineLatest](/operators/combination/combinelatest.md) - * [concat](/operators/combination/concat.md) - * [concatAll](/operators/combination/concatall.md) - * [forkJoin](/operators/combination/forkjoin.md) - * [merge](/operators/combination/merge.md) - * [mergeAll](/operators/combination/mergeall.md) - * [pairwise](/operators/combination/pairwise.md) - * [race](/operators/combination/race.md) - * [startWith](/operators/combination/startwith.md) - * [withLatestFrom](/operators/combination/withlatestfrom.md) - * [zip](/operators/combination/zip.md) - * [Conditional](/operators/conditional/README.md) - * [defaultIfEmpty](/operators/conditional/defaultifempty.md) - * [every](/operators/conditional/every.md) - * [Creation](/operators/creation/README.md) - * [create](/operators/creation/create.md) - * [empty](/operators/creation/empty.md) - * [from](/operators/creation/from.md) - * [fromEvent](/operators/creation/fromevent.md) - * [fromPromise](/operators/creation/frompromise.md) - * [interval](/operators/creation/interval.md) - * [of](/operators/creation/of.md) - * [range](/operators/creation/range.md) - * [throw](/operators/creation/throw.md) - * [timer](/operators/creation/timer.md) - * [Error Handling](/operators/error_handling/README.md) - * [catch / catchError](/operators/error_handling/catch.md) - * [retry](/operators/error_handling/retry.md) - * [retryWhen](/operators/error_handling/retrywhen.md) - * [Multicasting](/operators/multicasting/README.md) - * [publish](/operators/multicasting/publish.md) - * [multicast](/operators/multicasting/multicast.md) - * [share](/operators/multicasting/share.md) - * [shareReplay](/operators/multicasting/sharereplay.md) - * [Filtering](/operators/filtering/README.md) - * [audit](/operators/filtering/audit.md) - * [auditTime](/operators/filtering/audittime.md) - * [debounce](/operators/filtering/debounce.md) - * [debounceTime](/operators/filtering/debouncetime.md) - * [distinctUntilChanged](/operators/filtering/distinctuntilchanged.md) - * [filter](/operators/filtering/filter.md) - * [first](/operators/filtering/first.md) - * [ignoreElements](/operators/filtering/ignoreelements.md) - * [last](/operators/filtering/last.md) - * [sample](/operators/filtering/sample.md) - * [single](/operators/filtering/single.md) - * [skip](/operators/filtering/skip.md) - * [skipUntil](/operators/filtering/skipuntil.md) - * [skipWhile](/operators/filtering/skipwhile.md) - * [take](/operators/filtering/take.md) - * [takeUntil](/operators/filtering/takeuntil.md) - * [takeWhile](/operators/filtering/takewhile.md) - * [throttle](/operators/filtering/throttle.md) - * [throttleTime](/operators/filtering/throttletime.md) - * [Transformation](/operators/transformation/README.md) - * [buffer](/operators/transformation/buffer.md) - * [bufferCount](/operators/transformation/buffercount.md) - * [bufferTime](/operators/transformation/buffertime.md) - * [bufferToggle](/operators/transformation/buffertoggle.md) - * [bufferWhen](/operators/transformation/bufferwhen.md) - * [concatMap](/operators/transformation/concatmap.md) - * [concatMapTo](/operators/transformation/concatmapto.md) - * [exhaustMap](/operators/transformation/exhaustmap.md) - * [expand](/operators/transformation/expand.md) - * [groupBy](/operators/transformation/groupby.md) - * [map](/operators/transformation/map.md) - * [mapTo](/operators/transformation/mapto.md) - * [mergeMap / flatMap](/operators/transformation/mergemap.md) - * [partition](/operators/transformation/partition.md) - * [pluck](/operators/transformation/pluck.md) - * [reduce](/operators/transformation/reduce.md) - * [scan](/operators/transformation/scan.md) - * [switchMap](/operators/transformation/switchmap.md) - * [window](/operators/transformation/window.md) - * [windowCount](/operators/transformation/windowcount.md) - * [windowTime](/operators/transformation/windowtime.md) - * [windowToggle](/operators/transformation/windowtoggle.md) - * [windowWhen](/operators/transformation/windowwhen.md) - * [Utility](/operators/utility/README.md) - * [do / tap](/operators/utility/do.md) - * [delay](/operators/utility/delay.md) - * [delayWhen](/operators/utility/delaywhen.md) - * [dematerialize](/operators/utility/dematerialize.md) - * [finalize / finally](operators/utility/finalize.md) - * [let](/operators/utility/let.md) - * [timeout](/operators/utility/timeout.md) - * [toPromise](/operators/utility/topromise.md) - * [Full Listing](/operators/complete.md) -* [Recipes](/recipes/README.md) - * [Http Polling](/recipes/http-polling.md) - * [Game Loop](/recipes/gameloop.md) - * [Progress Bar](/recipes/progressbar.md) - * [Smart Counter](/recipes/smartcounter.md) -* [Concepts](/concepts/README.md) - * [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) - * [Understanding Operator Imports](/concepts/operator-imports.md) +- [Operators](/operators/README.md) + - [Combination](/operators/combination/README.md) + - [combineAll](/operators/combination/combineall.md) + - [combineLatest](/operators/combination/combinelatest.md) + - [concat](/operators/combination/concat.md) + - [concatAll](/operators/combination/concatall.md) + - [forkJoin](/operators/combination/forkjoin.md) + - [merge](/operators/combination/merge.md) + - [mergeAll](/operators/combination/mergeall.md) + - [pairwise](/operators/combination/pairwise.md) + - [race](/operators/combination/race.md) + - [startWith](/operators/combination/startwith.md) + - [withLatestFrom](/operators/combination/withlatestfrom.md) + - [zip](/operators/combination/zip.md) + - [Conditional](/operators/conditional/README.md) + - [defaultIfEmpty](/operators/conditional/defaultifempty.md) + - [every](/operators/conditional/every.md) + - [Creation](/operators/creation/README.md) + - [create](/operators/creation/create.md) + - [empty](/operators/creation/empty.md) + - [from](/operators/creation/from.md) + - [fromEvent](/operators/creation/fromevent.md) + - [interval](/operators/creation/interval.md) + - [of](/operators/creation/of.md) + - [range](/operators/creation/range.md) + - [throw](/operators/creation/throw.md) + - [timer](/operators/creation/timer.md) + - [Error Handling](/operators/error_handling/README.md) + - [catch / catchError](/operators/error_handling/catch.md) + - [retry](/operators/error_handling/retry.md) + - [retryWhen](/operators/error_handling/retrywhen.md) + - [Multicasting](/operators/multicasting/README.md) + - [publish](/operators/multicasting/publish.md) + - [multicast](/operators/multicasting/multicast.md) + - [share](/operators/multicasting/share.md) + - [shareReplay](/operators/multicasting/sharereplay.md) + - [Filtering](/operators/filtering/README.md) + - [audit](/operators/filtering/audit.md) + - [auditTime](/operators/filtering/audittime.md) + - [debounce](/operators/filtering/debounce.md) + - [debounceTime](/operators/filtering/debouncetime.md) + - [distinctUntilChanged](/operators/filtering/distinctuntilchanged.md) + - [filter](/operators/filtering/filter.md) + - [first](/operators/filtering/first.md) + - [ignoreElements](/operators/filtering/ignoreelements.md) + - [last](/operators/filtering/last.md) + - [sample](/operators/filtering/sample.md) + - [single](/operators/filtering/single.md) + - [skip](/operators/filtering/skip.md) + - [skipUntil](/operators/filtering/skipuntil.md) + - [skipWhile](/operators/filtering/skipwhile.md) + - [take](/operators/filtering/take.md) + - [takeUntil](/operators/filtering/takeuntil.md) + - [takeWhile](/operators/filtering/takewhile.md) + - [throttle](/operators/filtering/throttle.md) + - [throttleTime](/operators/filtering/throttletime.md) + - [Transformation](/operators/transformation/README.md) + - [buffer](/operators/transformation/buffer.md) + - [bufferCount](/operators/transformation/buffercount.md) + - [bufferTime](/operators/transformation/buffertime.md) + - [bufferToggle](/operators/transformation/buffertoggle.md) + - [bufferWhen](/operators/transformation/bufferwhen.md) + - [concatMap](/operators/transformation/concatmap.md) + - [concatMapTo](/operators/transformation/concatmapto.md) + - [exhaustMap](/operators/transformation/exhaustmap.md) + - [expand](/operators/transformation/expand.md) + - [groupBy](/operators/transformation/groupby.md) + - [map](/operators/transformation/map.md) + - [mapTo](/operators/transformation/mapto.md) + - [mergeMap / flatMap](/operators/transformation/mergemap.md) + - [partition](/operators/transformation/partition.md) + - [pluck](/operators/transformation/pluck.md) + - [reduce](/operators/transformation/reduce.md) + - [scan](/operators/transformation/scan.md) + - [switchMap](/operators/transformation/switchmap.md) + - [window](/operators/transformation/window.md) + - [windowCount](/operators/transformation/windowcount.md) + - [windowTime](/operators/transformation/windowtime.md) + - [windowToggle](/operators/transformation/windowtoggle.md) + - [windowWhen](/operators/transformation/windowwhen.md) + - [Utility](/operators/utility/README.md) + - [do / tap](/operators/utility/do.md) + - [delay](/operators/utility/delay.md) + - [delayWhen](/operators/utility/delaywhen.md) + - [dematerialize](/operators/utility/dematerialize.md) + - [finalize / finally](operators/utility/finalize.md) + - [let](/operators/utility/let.md) + - [timeout](/operators/utility/timeout.md) + - [toPromise](/operators/utility/topromise.md) + - [Full Listing](/operators/complete.md) +- [Recipes](/recipes/README.md) + - [Http Polling](/recipes/http-polling.md) + - [Game Loop](/recipes/gameloop.md) + - [Progress Bar](/recipes/progressbar.md) + - [Smart Counter](/recipes/smartcounter.md) +- [Concepts](/concepts/README.md) + - [RxJS v5 -> v6 Upgrade](/concepts/rxjs5-6.md) + - [Understanding Operator Imports](/concepts/operator-imports.md) diff --git a/operators/README.md b/operators/README.md index 792688d9..8a958b47 100644 --- a/operators/README.md +++ b/operators/README.md @@ -7,99 +7,98 @@ _[Prefer a complete list in alphabetical order?](complete.md)_ ### Contents (By Operator Type) -* [Combination](combination/README.md) - * [combineAll](combination/combineall.md) - * [combineLatest](combination/combinelatest.md) :star: - * [concat](combination/concat.md) :star: - * [concatAll](combination/concatall.md) - * [forkJoin](combination/forkjoin.md) - * [merge](combination/merge.md) :star: - * [mergeAll](combination/mergeall.md) - * [race](combination/race.md) - * [startWith](combination/startwith.md) :star: - * [withLatestFrom](combination/withlatestfrom.md) :star: - * [zip](combination/zip.md) -* [Conditional](conditional/README.md) - * [defaultIfEmpty](conditional/defaultifempty.md) - * [every](conditional/every.md) -* [Creation](creation/README.md) - * [create](creation/create.md) - * [empty](creation/empty.md) - * [from](creation/from.md) :star: - * [fromEvent](creation/fromevent.md) - * [fromPromise](creation/frompromise.md) :star: - * [interval](creation/interval.md) - * [of](creation/of.md) :star: - * [range](creation/range.md) - * [throw](creation/throw.md) - * [timer](creation/timer.md) -* [Error Handling](error_handling/README.md) - * [catch / catchError](error_handling/catch.md) :star: - * [retry](error_handling/retry.md) - * [retryWhen](error_handling/retrywhen.md) -* [Filtering](filtering/README.md) - * [audit](filtering/audit.md) - * [auditTime](filtering/audittime.md) - * [debounce](filtering/debounce.md) - * [debounceTime](filtering/debouncetime.md) :star: - * [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: - * [filter](filtering/filter.md) :star: - * [first](filtering/first.md) - * [ignoreElements](filtering/ignoreelements.md) - * [last](filtering/last.md) - * [sample](filtering/sample.md) - * [single](filtering/single.md) - * [skip](filtering/skip.md) - * [skipUntil](filtering/skipuntil.md) - * [skipWhile](filtering/skipwhile.md) - * [take](filtering/take.md) :star: - * [takeUntil](filtering/takeuntil.md) :star: - * [takeWhile](filtering/takewhile.md) - * [throttle](filtering/throttle.md) - * [throttleTime](filtering/throttletime.md) -* [Multicasting](multicasting/README.md) - * [multicast](multicasting/multicast.md) - * [publish](multicasting/publish.md) - * [share](multicasting/share.md) :star: - * [shareReplay](multicasting/sharereplay.md) :star: -* [Transformation](transformation/README.md) - * [buffer](transformation/buffer.md) - * [bufferCount](transformation/buffercount.md) - * [bufferTime](transformation/buffertime.md) :star: - * [bufferToggle](transformation/buffertoggle.md) - * [bufferWhen](transformation/bufferwhen.md) - * [concatMap](transformation/concatmap.md) :star: - * [concatMapTo](transformation/concatmapto.md) - * [expand](transformation/expand.md) - * [exhaustMap](transformation/exhaustmap.md) - * [groupBy](transformation/groupby.md) - * [map](transformation/map.md) :star: - * [mapTo](transformation/mapto.md) - * [mergeMap / flatMap](transformation/mergemap.md) :star: - * [partition](transformation/partition.md) - * [pluck](transformation/pluck.md) - * [reduce](transformation/reduce.md) - * [scan](transformation/scan.md) :star: - * [switchMap](transformation/switchmap.md) :star: - * [window](transformation/window.md) - * [windowCount](transformation/windowcount.md) - * [windowTime](transformation/windowtime.md) - * [windowToggle](transformation/windowtoggle.md) - * [windowWhen](transformation/windowwhen.md) -* [Utility](utility/README.md) - * [do / tap](utility/do.md) :star: - * [delay](utility/delay.md) - * [delayWhen](utility/delaywhen.md) - * [finalize / finally](finalize.md) - * [let](utility/let.md) - * [toPromise](utility/topromise.md) - * [timeout](utility/timeout.md) +- [Combination](combination/README.md) + - [combineAll](combination/combineall.md) + - [combineLatest](combination/combinelatest.md) :star: + - [concat](combination/concat.md) :star: + - [concatAll](combination/concatall.md) + - [forkJoin](combination/forkjoin.md) + - [merge](combination/merge.md) :star: + - [mergeAll](combination/mergeall.md) + - [race](combination/race.md) + - [startWith](combination/startwith.md) :star: + - [withLatestFrom](combination/withlatestfrom.md) :star: + - [zip](combination/zip.md) +- [Conditional](conditional/README.md) + - [defaultIfEmpty](conditional/defaultifempty.md) + - [every](conditional/every.md) +- [Creation](creation/README.md) + - [create](creation/create.md) + - [empty](creation/empty.md) + - [from](creation/from.md) :star: + - [fromEvent](creation/fromevent.md) + - [interval](creation/interval.md) + - [of](creation/of.md) :star: + - [range](creation/range.md) + - [throw](creation/throw.md) + - [timer](creation/timer.md) +- [Error Handling](error_handling/README.md) + - [catch / catchError](error_handling/catch.md) :star: + - [retry](error_handling/retry.md) + - [retryWhen](error_handling/retrywhen.md) +- [Filtering](filtering/README.md) + - [audit](filtering/audit.md) + - [auditTime](filtering/audittime.md) + - [debounce](filtering/debounce.md) + - [debounceTime](filtering/debouncetime.md) :star: + - [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: + - [filter](filtering/filter.md) :star: + - [first](filtering/first.md) + - [ignoreElements](filtering/ignoreelements.md) + - [last](filtering/last.md) + - [sample](filtering/sample.md) + - [single](filtering/single.md) + - [skip](filtering/skip.md) + - [skipUntil](filtering/skipuntil.md) + - [skipWhile](filtering/skipwhile.md) + - [take](filtering/take.md) :star: + - [takeUntil](filtering/takeuntil.md) :star: + - [takeWhile](filtering/takewhile.md) + - [throttle](filtering/throttle.md) + - [throttleTime](filtering/throttletime.md) +- [Multicasting](multicasting/README.md) + - [multicast](multicasting/multicast.md) + - [publish](multicasting/publish.md) + - [share](multicasting/share.md) :star: + - [shareReplay](multicasting/sharereplay.md) :star: +- [Transformation](transformation/README.md) + - [buffer](transformation/buffer.md) + - [bufferCount](transformation/buffercount.md) + - [bufferTime](transformation/buffertime.md) :star: + - [bufferToggle](transformation/buffertoggle.md) + - [bufferWhen](transformation/bufferwhen.md) + - [concatMap](transformation/concatmap.md) :star: + - [concatMapTo](transformation/concatmapto.md) + - [expand](transformation/expand.md) + - [exhaustMap](transformation/exhaustmap.md) + - [groupBy](transformation/groupby.md) + - [map](transformation/map.md) :star: + - [mapTo](transformation/mapto.md) + - [mergeMap / flatMap](transformation/mergemap.md) :star: + - [partition](transformation/partition.md) + - [pluck](transformation/pluck.md) + - [reduce](transformation/reduce.md) + - [scan](transformation/scan.md) :star: + - [switchMap](transformation/switchmap.md) :star: + - [window](transformation/window.md) + - [windowCount](transformation/windowcount.md) + - [windowTime](transformation/windowtime.md) + - [windowToggle](transformation/windowtoggle.md) + - [windowWhen](transformation/windowwhen.md) +- [Utility](utility/README.md) + - [do / tap](utility/do.md) :star: + - [delay](utility/delay.md) + - [delayWhen](utility/delaywhen.md) + - [finalize / finally](finalize.md) + - [let](utility/let.md) + - [toPromise](utility/topromise.md) + - [timeout](utility/timeout.md) :star: - _commonly used_ ### Additional Resources -* [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) +- [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) :newspaper: - Official Docs -* [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) +- [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) :video_camera: :dollar: - André Staltz diff --git a/operators/combination/combineall.md b/operators/combination/combineall.md index 159514f7..ec9b9cc7 100644 --- a/operators/combination/combineall.md +++ b/operators/combination/combineall.md @@ -19,6 +19,7 @@ ) ```js +// RxJS v6+ import { take, map, combineAll } from 'rxjs/operators'; import { interval } from 'rxjs'; diff --git a/operators/combination/combinelatest.md b/operators/combination/combinelatest.md index 472bb83a..16f16243 100644 --- a/operators/combination/combinelatest.md +++ b/operators/combination/combinelatest.md @@ -43,13 +43,14 @@ is likely a better option. ##### Example 1: Combining observables emitting at 3 intervals -( [StackBlitz](https://stackblitz.com/edit/typescript-wmfmtv?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/tinumesuda/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-vadvm2?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/tinumesuda/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/mygy9j86/69/) ) ```js -import { timer } from 'rxjs/observable/timer'; -import { combineLatest } from 'rxjs/observable/combineLatest'; +// RxJS v6+ +import { timer, combineLatest } from 'rxjs'; //timerOne emits first value at 1s, then once every 4s const timerOne = timer(1000, 4000); @@ -80,13 +81,14 @@ const subscribe = combined.subscribe( ##### Example 2: combineLatest with projection function -( [StackBlitz](https://stackblitz.com/edit/typescript-fcmjfl?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/codotapula/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-prtbvd?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/codotapula/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/uehasmb6/) ) ```js -import { timer } from 'rxjs/observable/timer'; -import { combineLatest } from 'rxjs/observable/combineLatest'; +// RxJS v6+ +import { timer, combineLatest } from 'rxjs'; //timerOne emits first value at 1s, then once every 4s const timerOne = timer(1000, 4000); @@ -114,14 +116,15 @@ const subscribe = combinedProject.subscribe(latestValuesProject => ##### Example 3: Combining events from 2 buttons -( [StackBlitz](https://stackblitz.com/edit/typescript-sfbopd?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/buridepaxi/edit?html,js,output) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ihcxud?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/buridepaxi/edit?html,js,output) | [jsFiddle](https://jsfiddle.net/btroncone/9rsf6t9v/14/) ) ```js +// RxJS v6+ +import { fromEvent, combineLatest } from 'rxjs'; import { mapTo, startWith, scan, tap, map } from 'rxjs/operators'; -import { fromEvent } from 'rxjs/observable/fromEvent'; -import { combineLatest } from 'rxjs/observable/combineLatest'; // helper function to set HTML const setHtml = id => val => (document.getElementById(id).innerHTML = val); @@ -156,11 +159,11 @@ const combineTotal$ = combineLatest(addOneClick$('red'), addOneClick$('black')) ### Additional Resources -* [combineLatest](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-combineLatest) +- [combineLatest](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-combineLatest) :newspaper: - Official docs -* [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) +- [Combining streams with combineLatest](https://egghead.io/lessons/rxjs-combining-streams-with-combinelatest?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist -* [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) +- [Combination operator: combineLatest](https://egghead.io/lessons/rxjs-combination-operator-combinelatest?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/combination/concat.md b/operators/combination/concat.md index 1b431702..5f9961c7 100644 --- a/operators/combination/concat.md +++ b/operators/combination/concat.md @@ -26,13 +26,15 @@ instead! ##### Example 1: concat 2 basic observables -( [StackBlitz](https://stackblitz.com/edit/typescript-oqm79a?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/gegubutele/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ec6wed?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/gegubutele/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/rxwnr3hh/) ) ```js +// RxJS v6+ import { concat } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; //emits 1,2,3 const sourceOne = of(1, 2, 3); @@ -48,13 +50,14 @@ const subscribe = example.subscribe(val => ##### Example 2: concat as static method -( [StackBlitz](https://stackblitz.com/edit/typescript-oqtzx7?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/xihagewune/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ks8chl?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/xihagewune/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/5qdtvhu8/) ) ```js -import { of } from 'rxjs/observable/of'; -import { concat } from 'rxjs/observable/concat'; +// RxJS v6+ +import { of, concat } from 'rxjs'; //emits 1,2,3 const sourceOne = of(1, 2, 3); @@ -69,13 +72,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: concat with delayed source -( [StackBlitz](https://stackblitz.com/edit/typescript-rkvfgp?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/nezonosubi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-vsphry?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/nezonosubi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/L2s49msx/) ) ```js +// RxJS v6+ import { delay, concat } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; //emits 1,2,3 const sourceOne = of(1, 2, 3); @@ -94,14 +99,14 @@ const subscribe = example.subscribe(val => ##### Example 4: concat with source that does not complete -( [StackBlitz](https://stackblitz.com/edit/typescript-pccj1d?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/vixajoxaze/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-njc2jw?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/vixajoxaze/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/4bhtb81u/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { of } from 'rxjs/observable/of'; -import { concat } from 'rxjs/observable/concat'; +// RxJS v6+ +import { interval, of, concat } from 'rxjs'; //when source never completes, the subsequent observables never runs const source = concat(interval(1000), of('This', 'Never', 'Runs')); @@ -116,9 +121,9 @@ const subscribe = source.subscribe(val => ### Additional Resources -* [concat](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concat) +- [concat](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concat) :newspaper: - Official docs -* [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) +- [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/combination/concatall.md b/operators/combination/concatall.md index 830540f8..cd33809f 100644 --- a/operators/combination/concatall.md +++ b/operators/combination/concatall.md @@ -25,14 +25,15 @@ a single operator instead! ##### Example 1: concatAll with observable -( [StackBlitz](https://stackblitz.com/edit/typescript-yxntdx?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/nakinenuva/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-zwtpc7?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/nakinenuva/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/8dfuf2y6/) ) ```js +// RxJS v6+ import { map, concatAll } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; -import { interval } from 'rxjs/observable/interval'; +import { of, interval } from 'rxjs'; //emit a value every 2 seconds const source = interval(2000); @@ -50,13 +51,15 @@ const subscribe = example.subscribe(val => ##### Example 2: concatAll with promise -( [StackBlitz](https://stackblitz.com/edit/typescript-4o4fu7?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/bekegeyopu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-3w4px3?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/bekegeyopu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/w7kp7qLs/) ) ```js +// RxJS v6+ import { map, concatAll } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; +import { interval } from 'rxjs'; //create and resolve basic promise const samplePromise = val => new Promise(resolve => resolve(val)); @@ -76,14 +79,15 @@ const subscribe = example.subscribe(val => ##### Example 3: Delay while inner observables complete -( [StackBlitz](https://stackblitz.com/edit/typescript-ad2emh?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/pojolatile/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ft3rbf?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/pojolatile/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/8230ucbg/) ) ```js +// RxJS v6+ import { take, concatAll } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; -import { of } from 'rxjs/observable/of'; +import { interval, of } from 'rxjs/observable/interval'; const obs1 = interval(1000).pipe(take(5)); const obs2 = interval(500).pipe(take(2)); @@ -106,13 +110,13 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -* [Progress Bar](../../recipes/progressbar.md) +- [Progress Bar](../../recipes/progressbar.md) ### Additional Resources -* [concatAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatAll) +- [concatAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatAll) :newspaper: - Official docs -* [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) +- [Flatten a higher order observable with concatAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-concatall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz --- diff --git a/operators/combination/forkjoin.md b/operators/combination/forkjoin.md index d88fd133..b07229e6 100644 --- a/operators/combination/forkjoin.md +++ b/operators/combination/forkjoin.md @@ -41,15 +41,15 @@ correct choice. In these cases you may better off with an operator like ##### Example 1: Observables completing after different durations -( [StackBlitz](https://stackblitz.com/edit/typescript-2qr3qi?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/remiduhimu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-bqxg9x?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/remiduhimu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/5fj77920/81/) ) ```js +// RxJS v6+ import { delay, take } from 'rxjs/operators'; -import { forkJoin } from 'rxjs/observable/forkJoin'; -import { of } from 'rxjs/observable/of'; -import { interval } from 'rxjs/observable/interval'; +import { forkJoin, of, interval } from 'rxjs'; const myPromise = val => new Promise(resolve => @@ -78,14 +78,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Making a variable number of requests -( [StackBlitz](https://stackblitz.com/edit/typescript-uxbl41?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/febejakapi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-3mbbjw?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/febejakapi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/0b8Lnh7s/1/) ) ```js +// RxJS v6+ import { mergeMap } from 'rxjs/operators'; -import { forkJoin } from 'rxjs/observable/forkJoin'; -import { of } from 'rxjs/observable/of'; +import { forkJoin, of } from 'rxjs'; const myPromise = val => new Promise(resolve => @@ -110,15 +111,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: Handling errors on outside -( [StackBlitz](https://stackblitz.com/edit/typescript-3fgrkn?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/gugawucixi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-xgskpm?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/gugawucixi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/6vz7tjx2/1/) ) ```js +// RxJS v6+ import { delay, catchError } from 'rxjs/operators'; -import { forkJoin } from 'rxjs/observable/forkJoin'; -import { of } from 'rxjs/observable/of'; -import { _throw } from 'rxjs/observable/throw'; +import { forkJoin, of, throwError } from 'rxjs'; /* when all observables complete, give the last @@ -138,15 +139,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 4: Getting successful results when one inner observable errors -( [StackBlitz](https://stackblitz.com/edit/typescript-z2nedm?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/memajepefe/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-hydgiu?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/memajepefe/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/emdu4doy/1/) ) ```js +// RxJS v6+ import { delay, catchError } from 'rxjs/operators'; -import { forkJoin } from 'rxjs/observable/forkJoin'; -import { of } from 'rxjs/observable/of'; -import { _throw } from 'rxjs/observable/throw'; +import { forkJoin, of, throwError } from 'rxjs'; /* when all observables complete, give the last @@ -216,7 +217,7 @@ export class App { ### Additional Resources -* [forkJoin](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-forkJoin) +- [forkJoin](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-forkJoin) :newspaper: - Official docs --- diff --git a/operators/combination/merge.md b/operators/combination/merge.md index 60c6575c..01343198 100644 --- a/operators/combination/merge.md +++ b/operators/combination/merge.md @@ -19,14 +19,15 @@ instead! ##### Example 1: merging multiple observables, static method -( [StackBlitz](https://stackblitz.com/edit/typescript-rkpu4e?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/conufujapi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ohq6rx?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/conufujapi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/qvq9dscu/) ) ```js +// RxJS v6+ import { mapTo } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; -import { merge } from 'rxjs/observable/merge'; +import { interval, merge } from 'rxjs'; //emit every 2.5 seconds const first = interval(2500); @@ -50,13 +51,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: merge 2 observables, instance method -( [StackBlitz](https://stackblitz.com/edit/typescript-nq3sfo?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/wuwujokaqu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-bcsl1r?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/wuwujokaqu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/me5ofcr0/) ) ```js +// RxJS v6+ import { merge } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; +import { interval } from 'rxjs'; //emit every 2.5 seconds const first = interval(2500); @@ -67,19 +70,20 @@ const example = first.pipe(merge(second)); //output: 0,1,0,2.... const subscribe = example.subscribe(val => console.log(val)); ``` + ### Related Recipes -* [HTTP Polling](../../recipes/http-polling.md) +- [HTTP Polling](../../recipes/http-polling.md) ### Additional Resources -* [merge](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-merge) +- [merge](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-merge) :newspaper: - Official docs -* [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) +- [Handling multiple streams with merge](https://egghead.io/lessons/rxjs-handling-multiple-streams-with-merge?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist -* [Sharing network requests with merge](https://egghead.io/lessons/rxjs-reactive-programming-sharing-network-requests-with-rxjs-merge?course=introduction-to-reactive-programming) +- [Sharing network requests with merge](https://egghead.io/lessons/rxjs-reactive-programming-sharing-network-requests-with-rxjs-merge?course=introduction-to-reactive-programming) :video_camera: :dollar: - André Staltz -* [Combination operator: merge](https://egghead.io/lessons/rxjs-combination-operator-merge?course=rxjs-beyond-the-basics-operators-in-depth) +- [Combination operator: merge](https://egghead.io/lessons/rxjs-combination-operator-merge?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/combination/mergeall.md b/operators/combination/mergeall.md index 4c610ba0..1e551d6a 100644 --- a/operators/combination/mergeall.md +++ b/operators/combination/mergeall.md @@ -21,13 +21,15 @@ single operator instead! ##### Example 1: mergeAll with promises -( [StackBlitz](https://stackblitz.com/edit/typescript-w2kazd?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/worecuhiba/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-y4ncvc?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/worecuhiba/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/0sc4nsxa/) ) ```js +// RxJS v6+ import { map, mergeAll } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; const myPromise = val => new Promise(resolve => setTimeout(() => resolve(`Result: ${val}`), 2000)); @@ -52,12 +54,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: mergeAll with _concurrent_ parameter -( [StackBlitz](https://stackblitz.com/edit/typescript-qbxs2y?file=index.ts&devtoolsheight=50) | -[jsFiddle](https://jsfiddle.net/zra3zxhs/) ) +( +[StackBlitz](https://stackblitz.com/edit/typescript-xpaqjh?file=index.ts&devtoolsheight=100) +| [jsFiddle](https://jsfiddle.net/zra3zxhs/) ) ```js +// RxJS v6+ import { take, map, delay, mergeAll } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; +import { interval } from 'rxjs'; const source = interval(500).pipe(take(5)); @@ -68,7 +72,15 @@ const source = interval(500).pipe(take(5)); in a backlog waiting to be subscribe. */ const example = source - .pipe(map(val => source.pipe(delay(1000), take(3))), mergeAll(2)) + .pipe( + map(val => + source.pipe( + delay(1000), + take(3) + ) + ), + mergeAll(2) + ) .subscribe(val => console.log(val)); /* The subscription is completed once the operator emits all values. @@ -77,9 +89,9 @@ const example = source ### Additional Resources -* [mergeAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeAll) +- [mergeAll](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeAll) :newspaper: - Official docs -* [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) +- [Flatten a higher order observable with mergeAll in RxJS](https://egghead.io/lessons/rxjs-flatten-a-higher-order-observable-with-mergeall-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz --- diff --git a/operators/combination/pairwise.md b/operators/combination/pairwise.md index 61b29bed..0579e66b 100644 --- a/operators/combination/pairwise.md +++ b/operators/combination/pairwise.md @@ -10,23 +10,28 @@ ##### Example 1: -( [StackBlitz](https://stackblitz.com/edit/typescript-hpjuv6?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/keteyahido/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-tkuydr?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/keteyahido/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/8va47bq3/) ) ```js +// RxJS v6+ import { pairwise, take } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; +import { interval } from 'rxjs'; //Returns: [0,1], [1,2], [2,3], [3,4], [4,5] interval(1000) - .pipe(pairwise(), take(5)) + .pipe( + pairwise(), + take(5) + ) .subscribe(console.log); ``` ### Additional Resources -* [pairwise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pairwise) +- [pairwise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pairwise) :newspaper: - Official docs --- diff --git a/operators/combination/race.md b/operators/combination/race.md index 215a4bd4..9cd3ebd3 100644 --- a/operators/combination/race.md +++ b/operators/combination/race.md @@ -10,11 +10,13 @@ ##### Example 1: race with 4 observables -( [StackBlitz](https://stackblitz.com/edit/typescript-cuzgkn?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/goqiwobeno/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-cvfmug?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/goqiwobeno/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/8jcmb1ec/) ) ```js +// RxJS v6+ import { mapTo } from 'rxjs/operators'; import { interval } from 'rxjs/observable/interval'; import { race } from 'rxjs/observable/race'; @@ -36,13 +38,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: race with an error -( [StackBlitz](https://stackblitz.com/edit/typescript-ptcwjp?file=index.ts&devtoolsheight=50) | -[jsFiddle](https://jsfiddle.net/gbeL4t55/2/) ) +( +[StackBlitz](https://stackblitz.com/edit/typescript-in6fw6?file=index.ts&devtoolsheight=100) +| [jsFiddle](https://jsfiddle.net/gbeL4t55/2/) ) ```js +// RxJS v6+ import { delay, map } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; -import { race } from 'rxjs/observable/race'; +import { of, race } from 'rxjs'; //Throws an error and ignores the other observables. const first = of('first').pipe( @@ -53,13 +56,13 @@ const first = of('first').pipe( ); const second = of('second').pipe(delay(200)); const third = of('third').pipe(delay(300)); - +// nothing logged race(first, second, third).subscribe(val => console.log(val)); ``` ### Additional Resources -* [race](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-race) +- [race](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-race) :newspaper: - Official docs --- diff --git a/operators/combination/startwith.md b/operators/combination/startwith.md index e69c2ebe..303619ad 100644 --- a/operators/combination/startwith.md +++ b/operators/combination/startwith.md @@ -22,13 +22,15 @@ can also start with an initial value! ##### Example 1: startWith on number sequence -( [StackBlitz](https://stackblitz.com/edit/typescript-e4fhpw?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/lezuravizu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-2qrwjt?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/lezuravizu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/e8dn3ggp/) ) ```js +// RxJS v6+ import { startWith } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; //emit (1,2,3) const source = of(1, 2, 3); @@ -40,13 +42,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: startWith for initial scan value -( [StackBlitz](https://stackblitz.com/edit/typescript-a6k8a8?file=index.ts&devtoolsheight=50) | | -[jsBin](http://jsbin.com/gemevuzoha/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-8gkbsc?file=index.ts&devtoolsheight=100) +| | [jsBin](http://jsbin.com/gemevuzoha/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/54r3g83e/) ) ```js +// RxJS v6+ import { startWith, scan } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; //emit ('World!', 'Goodbye', 'World!') const source = of('World!', 'Goodbye', 'World!'); @@ -67,13 +71,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: startWith multiple values -( [StackBlitz](https://stackblitz.com/edit/typescript-qyxyhu?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/cumupemuxa/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ek45ff?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/cumupemuxa/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/ckcyj3ms/) ) ```js +// RxJS v6+ import { startWith } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; +import { interval } from 'rxjs'; //emit values in sequence every 1s const source = interval(1000); @@ -85,17 +91,17 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -* [Smart Counter](../../recipes/smartcounter.md) +- [Smart Counter](../../recipes/smartcounter.md) ### Additional Resources -* [startWith](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith) +- [startWith](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith) :newspaper: - Official docs -* [Displaying initial data with startWith](https://egghead.io/lessons/rxjs-displaying-initial-data-with-startwith?course=step-by-step-async-javascript-with-rxjs) +- [Displaying initial data with startWith](https://egghead.io/lessons/rxjs-displaying-initial-data-with-startwith?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist -* [Clear data while loading with startWith](https://egghead.io/lessons/rxjs-reactive-programming-clear-data-while-loading-with-rxjs-startwith?course=introduction-to-reactive-programming) +- [Clear data while loading with startWith](https://egghead.io/lessons/rxjs-reactive-programming-clear-data-while-loading-with-rxjs-startwith?course=introduction-to-reactive-programming) :video_camera: :dollar: - André Staltz -* [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) +- [Combination operator: concat, startWith](https://egghead.io/lessons/rxjs-combination-operators-concat-startwith?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/combination/withlatestfrom.md b/operators/combination/withlatestfrom.md index 7d06a527..1bbd2263 100644 --- a/operators/combination/withlatestfrom.md +++ b/operators/combination/withlatestfrom.md @@ -17,13 +17,15 @@ emits, try [combinelatest](combinelatest.md)! ##### Example 1: Latest value from quicker second source -( [StackBlitz](https://stackblitz.com/edit/typescript-sekrr5?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/fitekeseru/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-tznzbj?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/fitekeseru/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/9c3pfgpk/) ) ```js +// RxJS v6+ import { withLatestFrom, map } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; +import { interval } from 'rxjs'; //emit every 5s const source = interval(5000); @@ -46,13 +48,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Slower second source -( [StackBlitz](https://stackblitz.com/edit/typescript-unq2gn?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/vujekucuxa/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-gigsdv?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/vujekucuxa/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/bywLL579/) ) ```js +// RxJS v6+ import { withLatestFrom, map } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; +import { interval } from 'rxjs'; //emit every 5s const source = interval(5000); @@ -77,14 +81,14 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -* [Progress Bar](../../recipes/progressbar.md) -* [Game Loop](../../recipes/gameloop.md) +- [Progress Bar](../../recipes/progressbar.md) +- [Game Loop](../../recipes/gameloop.md) ### Additional Resources -* [withLatestFrom](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom) +- [withLatestFrom](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom) :newspaper: - Official docs -* [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) +- [Combination operator: withLatestFrom](https://egghead.io/lessons/rxjs-combination-operator-withlatestfrom?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/combination/zip.md b/operators/combination/zip.md index d99dac45..eda2bc4a 100644 --- a/operators/combination/zip.md +++ b/operators/combination/zip.md @@ -2,13 +2,7 @@ #### signature: `zip(observables: *): Observable` -### Description - -###### TL;DR: After all observables emit, emit values as an array - -The **zip** operator will subscribe to all inner observables, waiting for each -to emit a value. Once this occurs, all values with the corresponding index will -be emitted. This will continue until at least one inner observable completes. +## After all observables emit, emit values as an array --- @@ -24,14 +18,15 @@ source! ##### Example 1: zip multiple observables emitting at alternate intervals -( [StackBlitz](https://stackblitz.com/edit/typescript-wd2mba?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/lireyisira/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-5az27c?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/lireyisira/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/ton462sg/) ) ```js +// RxJS v6+ import { delay } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; -import { zip } from 'rxjs/observable/zip'; +import { of, zip } from 'rxjs'; const sourceOne = of('Hello'); const sourceTwo = of('World!'); @@ -50,14 +45,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: zip when 1 observable completes -( [StackBlitz](https://stackblitz.com/edit/typescript-q1sucs?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/fisitatesa/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-f4qgry?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/fisitatesa/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/oamyk3xr/) ) ```js +// RxJS v6+ import { take } from 'rxjs/operators'; -import { interval } from 'rxjs/observable/interval'; -import { zip } from 'rxjs/observable/zip'; +import { interval, zip } from 'rxjs'; //emit every 1s const source = interval(1000); @@ -69,9 +65,9 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) +- [zip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip) :newspaper: - Official docs -* [Combination operator: zip](https://egghead.io/lessons/rxjs-combination-operator-zip?course=rxjs-beyond-the-basics-operators-in-depth) +- [Combination operator: zip](https://egghead.io/lessons/rxjs-combination-operator-zip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/complete.md b/operators/complete.md index 9c6f7e2f..f94ebb38 100644 --- a/operators/complete.md +++ b/operators/complete.md @@ -7,90 +7,89 @@ _[Prefer a split by operator type?](README.md)_ ### Contents (In Alphabetical Order) -* [audit](filtering/audit.md) -* [auditTime](filtering/audittime.md) -* [buffer](transformation/buffer.md) -* [bufferCount](transformation/buffercount.md) -* [bufferTime](transformation/buffertime.md) :star: -* [bufferToggle](transformation/buffertoggle.md) -* [bufferWhen](transformation/bufferwhen.md) -* [catch / catchError](error_handling/catch.md) :star: -* [combineAll](combination/combineall.md) -* [combineLatest](combination/combinelatest.md) :star: -* [concat](combination/concat.md) :star: -* [concatAll](combination/concatall.md) -* [concatMap](transformation/concatmap.md) :star: -* [concatMapTo](transformation/concatmapto.md) -* [create](creation/create.md) -* [debounce](filtering/debounce.md) -* [debounceTime](filtering/debouncetime.md) :star: -* [defaultIfEmpty](conditional/defaultifempty.md) -* [delay](utility/delay.md) -* [delayWhen](utility/delaywhen.md) -* [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: -* [do / tap](utility/do.md) :star: -* [empty](creation/empty.md) -* [every](conditional/every.md) -* [exhaustMap](transformation/exhaustmap.md) -* [expand](transformation/expand.md) -* [filter](filtering/filter.md) :star: -* [finalize / finally](utility/finalize.md) -* [first](filtering/first.md) -* [forkJoin](combination/forkjoin.md) -* [from](creation/from.md) :star: -* [fromEvent](creation/fromevent.md) -* [fromPromise](creation/frompromise.md) :star: -* [groupBy](transformation/groupby.md) -* [ignoreElements](filtering/ignoreelements.md) -* [interval](creation/interval.md) -* [last](filtering/last.md) -* [let](utility/let.md) -* [map](transformation/map.md) :star: -* [mapTo](transformation/mapto.md) -* [merge](combination/merge.md) :star: -* [mergeAll](combination/mergeall.md) -* [mergeMap / flatMap](transformation/mergemap.md) :star: -* [multicast](multicasting/multicast.md) -* [of](creation/of.md) :star: -* [partition](transformation/partition.md) -* [pluck](transformation/pluck.md) -* [publish](multicasting/publish.md) -* [race](combination/race.md) -* [range](creation/range.md) -* [retry](error_handling/retry.md) -* [retryWhen](error_handling/retrywhen.md) -* [sample](filtering/sample.md) -* [scan](transformation/scan.md) :star: -* [share](multicasting/share.md) :star: -* [shareReplay](multicasting/sharereplay.md) :star: -* [single](filtering/single.md) -* [skip](filtering/skip.md) -* [skipUntil](filtering/skipuntil.md) -* [skipWhile](filtering/skipwhile.md) -* [startWith](combination/startwith.md) :star: -* [switchMap](transformation/switchmap.md) :star: -* [take](filtering/take.md) :star: -* [takeUntil](filtering/takeuntil.md) :star: -* [takeWhile](filtering/takewhile.md) -* [throttle](filtering/throttle.md) -* [throttleTime](filtering/throttletime.md) -* [throw](creation/throw.md) -* [timeout](utilit/timeout.md) -* [timer](creation/timer.md) -* [toPromise](utility/topromise.md) -* [window](transformation/window.md) -* [windowCount](transformation/windowcount.md) -* [windowTime](transformation/windowtime.md) -* [windowToggle](transformation/windowtoggle.md) -* [windowWhen](transformation/windowwhen.md) -* [withLatestFrom](combination/withlatestfrom.md) :star: -* [zip](combination/zip.md) +- [audit](filtering/audit.md) +- [auditTime](filtering/audittime.md) +- [buffer](transformation/buffer.md) +- [bufferCount](transformation/buffercount.md) +- [bufferTime](transformation/buffertime.md) :star: +- [bufferToggle](transformation/buffertoggle.md) +- [bufferWhen](transformation/bufferwhen.md) +- [catch / catchError](error_handling/catch.md) :star: +- [combineAll](combination/combineall.md) +- [combineLatest](combination/combinelatest.md) :star: +- [concat](combination/concat.md) :star: +- [concatAll](combination/concatall.md) +- [concatMap](transformation/concatmap.md) :star: +- [concatMapTo](transformation/concatmapto.md) +- [create](creation/create.md) +- [debounce](filtering/debounce.md) +- [debounceTime](filtering/debouncetime.md) :star: +- [defaultIfEmpty](conditional/defaultifempty.md) +- [delay](utility/delay.md) +- [delayWhen](utility/delaywhen.md) +- [distinctUntilChanged](filtering/distinctuntilchanged.md) :star: +- [do / tap](utility/do.md) :star: +- [empty](creation/empty.md) +- [every](conditional/every.md) +- [exhaustMap](transformation/exhaustmap.md) +- [expand](transformation/expand.md) +- [filter](filtering/filter.md) :star: +- [finalize / finally](utility/finalize.md) +- [first](filtering/first.md) +- [forkJoin](combination/forkjoin.md) +- [from](creation/from.md) :star: +- [fromEvent](creation/fromevent.md) +- [groupBy](transformation/groupby.md) +- [ignoreElements](filtering/ignoreelements.md) +- [interval](creation/interval.md) +- [last](filtering/last.md) +- [let](utility/let.md) +- [map](transformation/map.md) :star: +- [mapTo](transformation/mapto.md) +- [merge](combination/merge.md) :star: +- [mergeAll](combination/mergeall.md) +- [mergeMap / flatMap](transformation/mergemap.md) :star: +- [multicast](multicasting/multicast.md) +- [of](creation/of.md) :star: +- [partition](transformation/partition.md) +- [pluck](transformation/pluck.md) +- [publish](multicasting/publish.md) +- [race](combination/race.md) +- [range](creation/range.md) +- [retry](error_handling/retry.md) +- [retryWhen](error_handling/retrywhen.md) +- [sample](filtering/sample.md) +- [scan](transformation/scan.md) :star: +- [share](multicasting/share.md) :star: +- [shareReplay](multicasting/sharereplay.md) :star: +- [single](filtering/single.md) +- [skip](filtering/skip.md) +- [skipUntil](filtering/skipuntil.md) +- [skipWhile](filtering/skipwhile.md) +- [startWith](combination/startwith.md) :star: +- [switchMap](transformation/switchmap.md) :star: +- [take](filtering/take.md) :star: +- [takeUntil](filtering/takeuntil.md) :star: +- [takeWhile](filtering/takewhile.md) +- [throttle](filtering/throttle.md) +- [throttleTime](filtering/throttletime.md) +- [throw](creation/throw.md) +- [timeout](utilit/timeout.md) +- [timer](creation/timer.md) +- [toPromise](utility/topromise.md) +- [window](transformation/window.md) +- [windowCount](transformation/windowcount.md) +- [windowTime](transformation/windowtime.md) +- [windowToggle](transformation/windowtoggle.md) +- [windowWhen](transformation/windowwhen.md) +- [withLatestFrom](combination/withlatestfrom.md) :star: +- [zip](combination/zip.md) :star: - _commonly used_ ### Additional Resources -* [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) +- [What Are Operators?](http://reactivex.io/rxjs/manual/overview.html#operators) :newspaper: - Official Docs -* [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) +- [What Operators Are](https://egghead.io/lessons/rxjs-what-rxjs-operators-are) :video_camera: :dollar: - André Staltz diff --git a/operators/conditional/defaultifempty.md b/operators/conditional/defaultifempty.md index 9c718168..7b63189b 100644 --- a/operators/conditional/defaultifempty.md +++ b/operators/conditional/defaultifempty.md @@ -11,13 +11,14 @@ ##### Example 1: Default for empty value ( -[Stackblitz](https://stackblitz.com/edit/typescript-9eg1us?file=index.ts&devtoolsheight=100) +[Stackblitz](https://stackblitz.com/edit/typescript-3btzml?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/yawumoqatu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/8ex96cov/) ) ```js +// RxJS v6+ import { defaultIfEmpty } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; //emit 'Observable.of() Empty!' when empty, else any values from source const exampleOne = of().pipe(defaultIfEmpty('Observable.of() Empty!')); @@ -28,13 +29,14 @@ const subscribe = exampleOne.subscribe(val => console.log(val)); ##### Example 2: Default for Observable.empty ( -[Stackblitz](https://stackblitz.com/edit/typescript-wxh3yr?file=index.ts&devtoolsheight=100) +[Stackblitz](https://stackblitz.com/edit/typescript-tyfjhu?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/kojafuvesu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/3edw828p/) ) ```js +// RxJS v6+ import { defaultIfEmpty } from 'rxjs/operators'; -import { empty } from 'rxjs/observable/empty'; +import { empty } from 'rxjs'; //emit 'Observable.empty()!' when empty, else any values from source const example = empty().pipe(defaultIfEmpty('Observable.empty()!')); @@ -44,7 +46,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [defaultIfEmpty](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-defaultIfEmpty) +- [defaultIfEmpty](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-defaultIfEmpty) :newspaper: - Official docs --- diff --git a/operators/conditional/every.md b/operators/conditional/every.md index 6678ea71..230c7e9f 100644 --- a/operators/conditional/every.md +++ b/operators/conditional/every.md @@ -11,13 +11,14 @@ ##### Example 1: Some values false ( -[Stackblitz](https://stackblitz.com/edit/typescript-8pv2ag?file=index.ts&devtoolsheight=100) +[Stackblitz](https://stackblitz.com/edit/typescript-299d7s?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/cibijotase/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/1b46tsm7/) ) ```js +// RxJS v6+ import { every } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; //emit 5 values const source = of(1, 2, 3, 4, 5); @@ -32,13 +33,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: All values true ( -[Stackblitz](https://stackblitz.com/edit/typescript-pzywh8?file=index.ts&devtoolsheight=100) +[Stackblitz](https://stackblitz.com/edit/typescript-ztrzqe?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/yuxefiviko/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/x34nLmcj/) ) ```js +// RxJS v6+ import { every } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; //emit 5 values const allEvens = of(2, 4, 6, 8, 10); @@ -52,7 +54,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [every](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-every) +- [every](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-every) :newspaper: - Official docs --- diff --git a/operators/creation/README.md b/operators/creation/README.md index aab531eb..0ddafabd 100644 --- a/operators/creation/README.md +++ b/operators/creation/README.md @@ -1,21 +1,24 @@ # Creation Operators -These operators allow the creation of an observable from nearly anything. From generic -to specific use-cases you are free, and encouraged, to turn [everything into a stream](http://slides.com/robwormald/everything-is-a-stream#/). +These operators allow the creation of an observable from nearly anything. From +generic to specific use-cases you are free, and encouraged, to turn +[everything into a stream](http://slides.com/robwormald/everything-is-a-stream#/). ## Contents -* [create](create.md) -* [empty](empty.md) -* [from](from.md) :star: -* [fromEvent](fromevent.md) -* [fromPromise](frompromise.md) :star: -* [interval](interval.md) -* [of](of.md) :star: -* [range](range.md) -* [throw](throw.md) -* [timer](timer.md) -:star: - *commonly used* +- [create](create.md) +- [empty](empty.md) +- [from](from.md) :star: +- [fromEvent](fromevent.md) +- [interval](interval.md) +- [of](of.md) :star: +- [range](range.md) +- [throw](throw.md) +- [timer](timer.md) + +:star: - _commonly used_ ### Additional Resources -* [Creating Observables From Scratch](https://egghead.io/courses/rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz \ No newline at end of file + +- [Creating Observables From Scratch](https://egghead.io/courses/rxjs-beyond-the-basics-creating-observables-from-scratch) + :video_camera: :dollar: - André Staltz diff --git a/operators/creation/create.md b/operators/creation/create.md index 7b76f4e4..2f56e31e 100644 --- a/operators/creation/create.md +++ b/operators/creation/create.md @@ -10,11 +10,14 @@ ##### Example 1: Observable that emits multiple values -( [jsBin](http://jsbin.com/qorugiwaba/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-baxh98?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/qorugiwaba/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/td5107he/) ) ```js -import { Observable } from 'rxjs/Observable'; +// RxJS v6+ +import { Observable } from 'rxjs'; /* Create an observable that emits 'Hello' and 'World' on subscription. @@ -30,11 +33,14 @@ const subscribe = hello.subscribe(val => console.log(val)); ##### Example 2: Observable that emits even numbers on timer -( [jsBin](http://jsbin.com/lodilohate/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-xvezxn?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/lodilohate/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/vtozg6uf/) ) ```js -import { Observable } from 'rxjs/Observable'; +// RxJS v6+ +import { Observable } from 'rxjs'; /* Increment value every 1s, emit even numbers. @@ -60,11 +66,11 @@ setTimeout(() => { ### Additional Resources -* [create](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-create) +- [create](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-create) :newspaper: - Official docs -* [Creation operators: Create()](https://egghead.io/lessons/rxjs-creation-operator-create?course=rxjs-beyond-the-basics-creating-observables-from-scratch) +- [Creation operators: Create()](https://egghead.io/lessons/rxjs-creation-operator-create?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz -* [Using Observable.create for fine-grained control](https://egghead.io/lessons/rxjs-using-observable-create-for-fine-grained-control) +- [Using Observable.create for fine-grained control](https://egghead.io/lessons/rxjs-using-observable-create-for-fine-grained-control) :video_camera: :dollar: - Shane Osbourne --- diff --git a/operators/creation/empty.md b/operators/creation/empty.md index f8ff9117..c47e4ab1 100644 --- a/operators/creation/empty.md +++ b/operators/creation/empty.md @@ -11,12 +11,13 @@ ##### Example 1: empty immediately completes ( -[StackBlitz](https://stackblitz.com/edit/typescript-ospewh?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-aqfpkq?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/rodubucaqa/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/bz71mzuy/) ) ```js -import { empty } from 'rxjs/observable/empty'; +// RxJS v6+ +import { empty } from 'rxjs'; //output: 'Complete!' const subscribe = empty().subscribe({ @@ -28,14 +29,12 @@ const subscribe = empty().subscribe({ ##### Example 2: `empty` with timer ( -[StackBlitz](https://stackblitz.com/edit/typescript-ur5svp?file=index.ts&devtoolsheight=50) +[StackBlitz](https://stackblitz.com/edit/typescript-uujo8t?file=index.ts&devtoolsheight=50) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { fromEvent } from 'rxjs/observable/fromEvent'; -import { merge } from 'rxjs/observable/merge'; -import { empty } from 'rxjs/observable/empty'; +// RxJS v6+ +import { interval, fromEvent, merge, empty } from 'rxjs'; import { switchMap, scan, takeWhile, startWith, mapTo } from 'rxjs/operators'; const countdownSeconds = 10; @@ -60,9 +59,9 @@ const timer$ = merge(pause$, resume$) ### Additional Resources -* [empty](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-empty) +- [empty](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-empty) :newspaper: - Official docs -* [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) +- [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz --- diff --git a/operators/creation/from.md b/operators/creation/from.md index 161487f4..f229360c 100644 --- a/operators/creation/from.md +++ b/operators/creation/from.md @@ -6,6 +6,8 @@ --- +:bulb: This operator can be used to convert a promise to an observable! + :bulb: For arrays and iterables, all contained values will be emitted as a sequence! @@ -20,11 +22,14 @@ characters! ##### Example 1: Observable from array -( [jsBin](http://jsbin.com/foceyuketi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-sckwsw?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/foceyuketi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/o7kb5e6j/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; //emit array as a sequence of values const arraySource = from([1, 2, 3, 4, 5]); @@ -34,11 +39,14 @@ const subscribe = arraySource.subscribe(val => console.log(val)); ##### Example 2: Observable from promise -( [jsBin](http://jsbin.com/tamofinujo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-clpg1f?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/tamofinujo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/2czc5sae/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; //emit result of promise const promiseSource = from(new Promise(resolve => resolve('Hello World!'))); @@ -48,11 +56,14 @@ const subscribe = promiseSource.subscribe(val => console.log(val)); ##### Example 3: Observable from collection -( [jsBin](http://jsbin.com/tezohobudu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-drfckx?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/tezohobudu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/ae6hu9a8/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; //works on js collections const map = new Map(); @@ -66,11 +77,14 @@ const subscribe = mapSource.subscribe(val => console.log(val)); ##### Example 4: Observable from string -( [jsBin](http://jsbin.com/wenozubana/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-19nejh?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/wenozubana/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/hfvzjcvL/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; //emit string as a sequence const source = from('Hello World'); @@ -80,14 +94,14 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes -* [Progress Bar](../../recipes/progressbar.md) -* [HTTP Polling](../../recipes/http-polling.md) +- [Progress Bar](../../recipes/progressbar.md) +- [HTTP Polling](../../recipes/http-polling.md) ### Additional Resources -* [from](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-from) +- [from](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-from) :newspaper: - Official docs -* [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) +- [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz --- diff --git a/operators/creation/fromevent.md b/operators/creation/fromevent.md index 9fdd5603..6cb19a64 100644 --- a/operators/creation/fromevent.md +++ b/operators/creation/fromevent.md @@ -10,11 +10,14 @@ ##### Example 1: Observable from mouse clicks -( [jsBin](http://jsbin.com/xikapewoqa/1/edit?js,console,output) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-mfyefr?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/xikapewoqa/1/edit?js,console,output) | [jsFiddle](https://jsfiddle.net/btroncone/vbLz1pdx/) ) ```js -import { fromEvent } from 'rxjs/observable/fromEvent'; +// RxJS v6+ +import { fromEvent } from 'rxjs'; import { map } from 'rxjs/operators'; //create observable that emits click events @@ -27,14 +30,14 @@ const subscribe = example.subscribe(val => console.log(val)); ### Related Recipes -* [Smart Counter](../../recipes/smartcounter.md) -* [Progress Bar](../../recipes/progressbar.md) -* [Game Loop](../../recipes/gameloop.md) -* [HTTP Polling](../../recipes/http-polling.md) +- [Smart Counter](../../recipes/smartcounter.md) +- [Progress Bar](../../recipes/progressbar.md) +- [Game Loop](../../recipes/gameloop.md) +- [HTTP Polling](../../recipes/http-polling.md) ### Additional Resources -* [fromEvent](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent) +- [fromEvent](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent) :newspaper: - Official docs --- diff --git a/operators/creation/frompromise.md b/operators/creation/frompromise.md deleted file mode 100644 index 03ab12b5..00000000 --- a/operators/creation/frompromise.md +++ /dev/null @@ -1,63 +0,0 @@ -# fromPromise - -#### signature: `fromPromise(promise: Promise, scheduler: Scheduler): Observable` - -## Create observable from promise, emitting result. - ---- - -:bulb: Flattening operators can accept promises without wrapping! - -:bulb: You could also use [from](from.md) for the same result! - ---- - -
- -### Examples - -##### Example 1: Converting promise to observable and catching errors - -( [jsBin](http://jsbin.com/cokivecima/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/upy6nr6n/) ) - -```js -import { of } from 'rxjs/observable/of'; -import { fromPromise } from 'rxjs/observable/fromPromise'; -import { mergeMap, catchError } from 'rxjs/operators'; - -//example promise that will resolve or reject based on input -const myPromise = willReject => { - return new Promise((resolve, reject) => { - if (willReject) { - reject('Rejected!'); - } - resolve('Resolved!'); - }); -}; -//emit true, then false -const source = of(true, false); -const example = source.pipe( - mergeMap(val => - fromPromise(myPromise(val)).pipe( - //catch and gracefully handle rejections - catchError(error => of(`Error: ${error}`)) - ) - ) -); -//output: 'Error: Rejected!', 'Resolved!' -const subscribe = example.subscribe(val => console.log(val)); -``` - -### Additional Resources - -* [fromPromise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromPromise) - :newspaper: - Official docs -* [Creation operators: from, fromArray, fromPromise](https://egghead.io/lessons/rxjs-creation-operators-from-fromarray-frompromise?course=rxjs-beyond-the-basics-creating-observables-from-scratch) - :video_camera: :dollar: - André Staltz -* [fromPromise - Guide](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/promises.md) - ---- - -> :file_folder: Source Code: -> [https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/fromPromise.ts](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/fromPromise.ts) diff --git a/operators/creation/interval.md b/operators/creation/interval.md index 56d3210d..ee514647 100644 --- a/operators/creation/interval.md +++ b/operators/creation/interval.md @@ -10,11 +10,14 @@ ##### Example 1: Emit sequence of values at 1 second interval -( [jsBin](http://jsbin.com/vigohomabo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ohddud?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/vigohomabo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/x3mrwzr0/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; //emit value in sequence every 1 second const source = interval(1000); @@ -24,9 +27,9 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -* [interval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-interval) +- [interval](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-interval) :newspaper: - Official docs -* [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) +- [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz --- diff --git a/operators/creation/of.md b/operators/creation/of.md index 9c3fe3ad..26ddb6a0 100644 --- a/operators/creation/of.md +++ b/operators/creation/of.md @@ -1,4 +1,4 @@ -# of +# of / just #### signature: `of(...values, scheduler: Scheduler): Observable` @@ -8,23 +8,30 @@ ##### Example 1: Emitting a sequence of numbers -( [jsBin](http://jsbin.com/kodixitoji/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-kbpvmm?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/kodixitoji/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/f7b35ayz/) ) ```js +// RxJS v6+ +import { of } from 'rxjs'; //emits any number of provided values in sequence -const source = Rx.Observable.of(1, 2, 3, 4, 5); +const source = of(1, 2, 3, 4, 5); //output: 1,2,3,4,5 const subscribe = source.subscribe(val => console.log(val)); ``` ##### Example 2: Emitting an object, array, and function -( [jsBin](http://jsbin.com/xevobujama/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-m1jbw9?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/xevobujama/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/d9rng4dj/) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; //emits values of any type const source = of({ name: 'Brian' }, [1, 2, 3], function hello() { return 'Hello'; @@ -35,9 +42,9 @@ const subscribe = source.subscribe(val => console.log(val)); ### Additional Resources -* [of](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-of) +- [of](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-of) :newspaper: - Official docs -* [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) +- [Creation operators: of](https://egghead.io/lessons/rxjs-creation-operator-of?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz --- diff --git a/operators/creation/range.md b/operators/creation/range.md index 4f7fb9a8..b58881cd 100644 --- a/operators/creation/range.md +++ b/operators/creation/range.md @@ -10,11 +10,14 @@ ##### Example 1: Emit range 1-10 -( [jsBin](http://jsbin.com/yalefomage/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-r5zrww?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/yalefomage/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/cfvfgwn9/) ) ```js -import { range } from 'rxjs/observable/range'; +// RxJS v6+ +import { range } from 'rxjs'; //emit 1-10 in sequence const source = range(1, 10); @@ -24,7 +27,7 @@ const example = source.subscribe(val => console.log(val)); ### Additional Resources -* [range](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-range) +- [range](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-range) :newspaper: - Official docs --- diff --git a/operators/creation/throw.md b/operators/creation/throw.md index 62e419c2..c3772233 100644 --- a/operators/creation/throw.md +++ b/operators/creation/throw.md @@ -10,14 +10,17 @@ ##### Example 1: Throw error on subscription -( [jsBin](http://jsbin.com/punubequju/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-5d3stz?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/punubequju/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/mks82xqz/) ) ```js -import { _throw } from 'rxjs/observable/throw'; +// RxJS v6+ +import { throwError } from 'rxjs'; //emits an error with specified value on subscription -const source = _throw('This is an error!'); +const source = throwError('This is an error!'); //output: 'Error: This is an error!' const subscribe = source.subscribe({ next: val => console.log(val), @@ -28,13 +31,13 @@ const subscribe = source.subscribe({ ### Related Examples -* [Throwing after 3 retries](../error_handling/retrywhen.md) +- [Throwing after 3 retries](../error_handling/retrywhen.md) ### Additional Resources -* [throw](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-throw) +- [throw](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-throw) :newspaper: - Official docs -* [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) +- [Creation operators: empty, never, and throw](https://egghead.io/lessons/rxjs-creation-operators-empty-never-throw?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz --- diff --git a/operators/creation/timer.md b/operators/creation/timer.md index cd41d4a3..e3df897e 100644 --- a/operators/creation/timer.md +++ b/operators/creation/timer.md @@ -10,11 +10,14 @@ ##### Example 1: timer emits 1 value then completes -( [jsBin](http://jsbin.com/pazajanehu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-fvkzgg?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/pazajanehu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/vpx0y8fu/) ) ```js -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { timer } from 'rxjs'; //emit 0 after 1 second then complete, since no second argument is supplied const source = timer(1000); @@ -24,11 +27,14 @@ const subscribe = source.subscribe(val => console.log(val)); ##### Example 2: timer emits after 1 second, then every 2 seconds -( [jsBin](http://jsbin.com/kejidofuje/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-h9pzxr?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/kejidofuje/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/30ddov8j/) ) ```js -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { timer } from 'rxjs'; /* timer takes a second argument, how often to emit subsequent values @@ -42,14 +48,13 @@ const subscribe = source.subscribe(val => console.log(val)); ### Related Recipes -* [HTTP Polling](../../recipes/http-polling.md) - +- [HTTP Polling](../../recipes/http-polling.md) ### Additional Resources -* [timer](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-timer) +- [timer](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-timer) :newspaper: - Official docs -* [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) +- [Creation operators: interval and timer](https://egghead.io/lessons/rxjs-creation-operators-interval-and-timer?course=rxjs-beyond-the-basics-creating-observables-from-scratch) :video_camera: :dollar: - André Staltz --- diff --git a/operators/error_handling/catch.md b/operators/error_handling/catch.md index f5089045..30402a7b 100644 --- a/operators/error_handling/catch.md +++ b/operators/error_handling/catch.md @@ -1,4 +1,4 @@ -# catchError +# catch / catchError #### signature: `catchError(project : function): Observable` @@ -20,14 +20,17 @@ ##### Example 1: Catching error from observable -( [jsBin](http://jsbin.com/porevoxelu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-auc2u2?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/porevoxelu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/wk4oLLqc/) ) ```js -import { _throw } from 'rxjs/observable/throw'; +// RxJS v6+ +import { throwError, of } from 'rxjs'; import { catchError } from 'rxjs/operators'; //emit error -const source = _throw('This is an error!'); +const source = throwError('This is an error!'); //gracefully handle error, returning observable with error message const example = source.pipe(catchError(val => of(`I caught: ${val}`))); //output: 'I caught: This is an error' @@ -36,13 +39,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Catching rejected promise -( [jsBin](http://jsbin.com/rusaxubanu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-nte3xs?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/rusaxubanu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/sLq92gLv/) ) ```js -import { timer } from 'rxjs/observable/timer'; -import { fromPromise } from 'rxjs/observable/timer'; -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { timer, from, of } from 'rxjs'; import { mergeMap, catchError } from 'rxjs/operators'; //create promise that immediately rejects @@ -53,9 +57,7 @@ const source = timer(1000); //catch rejected promise, returning observable containing error message const example = source.pipe( mergeMap(_ => - fromPromise(myBadPromise()).pipe( - catchError(error => of(`Bad Promise: ${error}`)) - ) + from(myBadPromise()).pipe(catchError(error => of(`Bad Promise: ${error}`))) ) ); //output: 'Bad Promise: Rejected' @@ -64,7 +66,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) +- [Error handling operator: catch](https://egghead.io/lessons/rxjs-error-handling-operator-catch?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/error_handling/retry.md b/operators/error_handling/retry.md index 0e4c47fe..deeb61de 100644 --- a/operators/error_handling/retry.md +++ b/operators/error_handling/retry.md @@ -10,14 +10,15 @@ ##### Example 1: Retry 2 times on error -( [jsBin](http://jsbin.com/yovacuxuqa/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-jpjcpg?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/yovacuxuqa/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/hg7z16bo/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { of } from 'rxjs/observable/of'; -import { _throw } from 'rxjs/observable/throw'; -import { mergeMap, retry } 'rxjs/operators'; +// RxJS v6+ +import { interval, of, throwError } from 'rxjs'; +import { mergeMap, retry } from 'rxjs/operators'; //emit value every 1s const source = interval(1000); @@ -25,7 +26,7 @@ const example = source.pipe( mergeMap(val => { //throw error for demonstration if (val > 5) { - return _throw('Error!'); + return throwError('Error!'); } return of(val); }), @@ -47,9 +48,9 @@ const subscribe = example.subscribe({ ### Additional Resources -* [retry](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retry) +- [retry](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retry) :newspaper: - Official docs -* [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) +- [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/error_handling/retrywhen.md b/operators/error_handling/retrywhen.md index 1496cf78..4adbd3fe 100644 --- a/operators/error_handling/retrywhen.md +++ b/operators/error_handling/retrywhen.md @@ -10,12 +10,14 @@ ##### Example 1: Trigger retry after specified duration -( [jsBin](http://jsbin.com/miduqexalo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-zpbsw6?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/miduqexalo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/49mkhsyr/) ) ```js -import { timer } from 'rxjs/observable/timer'; -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { timer, interval } from 'rxjs'; import { map, tap, retryWhen, delayWhen } from 'rxjs/operators'; //emit value every 1s @@ -57,13 +59,8 @@ const subscribe = example.subscribe(val => console.log(val)); [StackBlitz](https://stackblitz.com/edit/angular-cwnknr?file=app%2Frxjs-utils.ts) ) -_Credit to [Maxim Koretskyi](https://twitter.com/maxim_koretskyi) for the -optimization_ - ```js -import { Observable } from 'rxjs/Observable'; -import { _throw } from 'rxjs/observable/throw'; -import { timer } from 'rxjs/observable/timer'; +import { Observable, _throw, timer } from 'rxjs'; import { mergeMap, finalize } from 'rxjs/operators'; export const genericRetryStrategy = ({ @@ -101,7 +98,7 @@ export const genericRetryStrategy = ({ ```js import { Component, OnInit } from '@angular/core'; import { catchError, retryWhen } from 'rxjs/operators'; -import { of } from 'rxjs/observable/of'; +import { of } from 'rxjs'; import { genericRetryStrategy } from './rxjs-utils'; import { AppService } from './app.service'; @@ -142,9 +139,9 @@ export class AppComponent implements OnInit { ### Additional Resources -* [retryWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retryWhen) +- [retryWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retryWhen) :newspaper: - Official docs -* [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) +- [Error handling operator: retry and retryWhen](https://egghead.io/lessons/rxjs-error-handling-operator-retry-and-retrywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/audittime.md b/operators/filtering/audittime.md index 797e24ce..631ce0bf 100644 --- a/operators/filtering/audittime.md +++ b/operators/filtering/audittime.md @@ -8,7 +8,7 @@ ### Additional Resources -* [finalize](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-auditTime) +* [auditTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-auditTime) :newspaper: - Official docs --- diff --git a/operators/filtering/debounce.md b/operators/filtering/debounce.md index aa9baf9a..7444cf85 100644 --- a/operators/filtering/debounce.md +++ b/operators/filtering/debounce.md @@ -15,12 +15,12 @@ ##### Example 1: Debounce on timer -( [jsBin](http://jsbin.com/sorimeyoro/1/edit?js,console) | +( [StackBlitz](https://stackblitz.com/edit/typescript-dzjbra?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/sorimeyoro/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/e5698yow/) ) ```js -import { of } from 'rxjs/observable/of'; -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { of, timer } from 'rxjs'; import { debounce } from 'rxjs/operators'; //emit four strings @@ -39,18 +39,18 @@ const subscribe = debouncedExample.subscribe(val => console.log(val)); ##### Example 2: Debounce at increasing interval -( [jsBin](http://jsbin.com/sotaretese/1/edit?js,console) | +( [StackBlitz](https://stackblitz.com/edit/typescript-qnfidr?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/sotaretese/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/6ab34nq6/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { interval, timer } from 'rxjs'; import { debounce } from 'rxjs/operators'; //emit value every 1 second, ex. 0...1...2 -const interval = interval(1000); +const interval$ = interval(1000); //raise the debounce time by 200ms each second -const debouncedInterval = interval.pipe(debounce(val => timer(val * 200))); +const debouncedInterval = interval$.pipe(debounce(val => timer(val * 200))); /* After 5 seconds, debounce time will be greater than interval time, all future values will be thrown away diff --git a/operators/filtering/debouncetime.md b/operators/filtering/debouncetime.md index 39664535..c53c5e95 100644 --- a/operators/filtering/debouncetime.md +++ b/operators/filtering/debouncetime.md @@ -15,12 +15,12 @@ of user input must be controlled! ##### Example 1: Debouncing based on time between input -( [jsBin](http://jsbin.com/kacijarogi/1/edit?js,console,output) | +( [StackBlitz](https://stackblitz.com/edit/typescript-adheqt?file=index.ts&devtoolsheight=50) | [jsBin](http://jsbin.com/kacijarogi/1/edit?js,console,output) | [jsFiddle](https://jsfiddle.net/btroncone/7kbg4q2e/) ) ```js -import { fromEvent } from 'rxjs/observable/fromEvent'; -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { fromEvent, timer } from 'rxjs'; import { debounceTime, map } from 'rxjs/operators'; const input = document.getElementById('example'); diff --git a/operators/filtering/distinctuntilchanged.md b/operators/filtering/distinctuntilchanged.md index ca2d6005..a6ea1bc6 100644 --- a/operators/filtering/distinctuntilchanged.md +++ b/operators/filtering/distinctuntilchanged.md @@ -15,11 +15,12 @@ must match! ##### Example 1: distinctUntilChanged with basic values -( [jsBin](http://jsbin.com/qoyoxeheva/1/edit?js,console) | +( [StackBlitz](https://stackblitz.com/edit/typescript-bsb8mw?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/qoyoxeheva/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/xc2vzct7/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { distinctUntilChanged } from 'rxjs/operators'; //only output distinct values, based on the last emitted value @@ -37,11 +38,12 @@ const nonDistinctSub = myArrayWithDuplicatesInARow ##### Example 2: distinctUntilChanged with objects -( [jsBin](http://jsbin.com/mexocipave/1/edit?js,console) | +( [StackBlitz](https://stackblitz.com/edit/typescript-moe7mh?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/mexocipave/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/t4ava5b4/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { distinctUntilChanged } from 'rxjs/operators'; const sampleObject = { name: 'Test' }; diff --git a/operators/filtering/filter.md b/operators/filtering/filter.md index 00999354..002c47e1 100644 --- a/operators/filtering/filter.md +++ b/operators/filtering/filter.md @@ -15,11 +15,12 @@ out [takeWhile](takewhile.md)! ##### Example 1: filter for even numbers -( [jsBin](http://jsbin.com/vafogoluye/1/edit?js,console) | +( [StackBlitz](https://stackblitz.com/edit/typescript-4g4cys?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/vafogoluye/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/tkz0fuy2/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; //emit (1,2,3,4,5) @@ -32,11 +33,12 @@ const subscribe = example.subscribe(val => console.log(`Even number: ${val}`)); ##### Example 2: filter objects based on property -( [jsBin](http://jsbin.com/qihagaxuso/1/edit?js,console) | +( [StackBlitz](https://stackblitz.com/edit/typescript-n73fsn?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/qihagaxuso/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/yjdsoug1/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; //emit ({name: 'Joe', age: 31}, {name: 'Bob', age:25}) @@ -49,11 +51,12 @@ const subscribe = example.subscribe(val => console.log(`Over 30: ${val.name}`)); ##### Example 3: filter for number greater than specified value -( [jsBin](http://jsbin.com/rakabaheyu/1/edit?js,console) | +( [StackBlitz](https://stackblitz.com/edit/typescript-eyvvfu?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/rakabaheyu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/g1tgreha/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { filter } from 'rxjs/operators'; //emit every second diff --git a/operators/filtering/first.md b/operators/filtering/first.md index 0c968436..7a1130c4 100644 --- a/operators/filtering/first.md +++ b/operators/filtering/first.md @@ -20,11 +20,14 @@ ##### Example 1: First value from sequence -( [jsBin](http://jsbin.com/kayenuxoma/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-t8hseq?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/kayenuxoma/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/uncey4v9/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { first } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); @@ -36,11 +39,14 @@ const subscribe = example.subscribe(val => console.log(`First value: ${val}`)); ##### Example 2: First value to pass predicate -( [jsBin](http://jsbin.com/pujowawovu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-bw5byu?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/pujowawovu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/pt36r8cu/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { first } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); @@ -52,40 +58,30 @@ const subscribe = example.subscribe(val => ); ``` -##### Example 3: Using optional projection function +##### Example 3: Utilizing default value -( [jsBin](http://jsbin.com/qijekijaja/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/qosu0cx6/) ) - -```js -const source = Rx.Observable.from([1, 2, 3, 4, 5]); -//using optional projection function -const example = source.first( - num => num % 2 === 0, - (result, index) => `First even: ${result} is at index: ${index}` -); -//output: "First even: 2 at index: 1" -const subscribe = example.subscribe(val => console.log(val)); -``` - -##### Example 4: Utilizing default value - -( [jsBin](http://jsbin.com/qoganeleqa/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-2pkzpv?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/qoganeleqa/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/owx2jdg1/3/) ) ```js -const source = Rx.Observable.from([1, 2, 3, 4, 5]); +// RxJS v6+ +import { from } from 'rxjs'; +import { first } from 'rxjs/operators'; + +const source = from([1, 2, 3, 4, 5]); //no value will pass, emit default -const example = source.first(val => val > 5, val => `Value: ${val}`, 'Nothing'); +const example = source.pipe(first(val => val > 5, 'Nothing')); //output: 'Nothing' const subscribe = example.subscribe(val => console.log(val)); ``` ### Additional Resources -* [first](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first) +- [first](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first) :newspaper: - Official docs -* [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/ignoreelements.md b/operators/filtering/ignoreelements.md index 0328c97d..5cd30bdc 100644 --- a/operators/filtering/ignoreelements.md +++ b/operators/filtering/ignoreelements.md @@ -10,17 +10,23 @@ ##### Example 1: Ignore all elements from source -( [jsBin](http://jsbin.com/yiyefelubi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-jpjcpg?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/yiyefelubi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/59scjqss/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { take, ignoreElements } from 'rxjs/operators'; //emit value every 100ms const source = interval(100); //ignore everything but complete -const example = source.pipe(take(5), ignoreElements()); +const example = source.pipe( + take(5), + ignoreElements() +); //output: "COMPLETE!" const subscribe = example.subscribe( val => console.log(`NEXT: ${val}`), @@ -31,13 +37,14 @@ const subscribe = example.subscribe( ##### Example 2: Only displaying error -( [jsBin](http://jsbin.com/gogonawuze/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-3yxv9z?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/gogonawuze/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/srcwdgw6/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { _throw } from 'rxjs/observable/throw'; -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { interval, throwError, of } from 'rxjs'; import { mergeMap, ignoreElements } from 'rxjs/operators'; //emit value every 100ms @@ -46,7 +53,7 @@ const source = interval(100); const error = source.pipe( mergeMap(val => { if (val === 4) { - return _throw(`ERROR AT ${val}`); + return throwError(`ERROR AT ${val}`); } return of(val); }), @@ -62,7 +69,7 @@ const subscribe = error.subscribe( ### Additional Resources -* [ignoreElements](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-ignoreElements) +- [ignoreElements](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-ignoreElements) :newspaper: - Official docs --- diff --git a/operators/filtering/last.md b/operators/filtering/last.md index 6245493e..0b4e104a 100644 --- a/operators/filtering/last.md +++ b/operators/filtering/last.md @@ -16,11 +16,14 @@ ##### Example 1: Last value in sequence -( [jsBin](http://jsbin.com/pevaqeloki/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ma7knv?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/pevaqeloki/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/b05r434a/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { last } 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); @@ -32,11 +35,14 @@ const subscribe = example.subscribe(val => console.log(`Last value: ${val}`)); ##### Example 2: Last value to pass predicate -( [jsBin](http://jsbin.com/yagexuwari/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-tk42hj?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/yagexuwari/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/pkx2btsh/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { last } 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); @@ -48,48 +54,30 @@ const subscribeTwo = exampleTwo.subscribe(val => ); ``` -##### Example 3: Last with result selector +##### Example 3: Last with default value -( [jsBin](http://jsbin.com/hobinukisu/1/edit?js,console) | -[jsFiddle](https://jsfiddle.net/btroncone/76247162/) ) - -```js -import { from } from 'rxjs/observable/from'; -import { last } 'rxjs/operators'; - -const source = from([1, 2, 3, 4, 5]); -//supply an option projection function for the second parameter -const exampleTwo = source.pipe( - last( - v => v > 4, - v => `The highest emitted number was ${v}` - ) -); -//output: 'The highest emitted number was 5' -const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); -``` - -##### Example 4: Last with default value - -( [jsBin](http://jsbin.com/fudubebabi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-nrc1an?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/fudubebabi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/L7fbx3vp/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { last } 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); //no values will pass given predicate, emit default -const exampleTwo = source.pipe(last(v => v > 5, v => v, 'Nothing!')); +const exampleTwo = source.pipe(last(v => v > 5, 'Nothing!')); //output: 'Nothing!' const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` ### Additional Resources -* [last](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-last) +- [last](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-last) :newspaper: - Official docs -* [Filtering operator: takeLast, last](https://egghead.io/lessons/rxjs-filtering-operators-takelast-last?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: takeLast, last](https://egghead.io/lessons/rxjs-filtering-operators-takelast-last?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/sample.md b/operators/filtering/sample.md index 5425b0d0..c030207b 100644 --- a/operators/filtering/sample.md +++ b/operators/filtering/sample.md @@ -10,31 +10,35 @@ ##### Example 1: Sample source every 2 seconds -( [jsBin](http://jsbin.com/gemebopifu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-envpsp?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/gemebopifu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/8wsbuvjb/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { sample } 'rxjs/operators'; //emit value every 1s const source = interval(1000); //sample last emitted value from source every 2s -const example = source.sample.pipe(interval(2000)); +const example = source.pipe(sample(interval(2000))); //output: 2..4..6..8.. const subscribe = example.subscribe(val => console.log(val)); ``` ##### Example 2: Sample source when interval emits -( [jsBin](http://jsbin.com/cunicepube/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-sgat7t?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/cunicepube/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/b33kg9dn/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { zip } from 'rxjs/observable/zip'; -import { from } from 'rxjs/observable/from'; -import { sample } 'rxjs/operators'; +// RxJS v6+ +import { interval, zip, from } from 'rxjs'; +import { sample } from 'rxjs/operators'; const source = zip( //emit 'Joe', 'Frank' and 'Bob' in sequence @@ -53,26 +57,29 @@ const subscribe = example.subscribe(val => console.log(val)); From [Stack Overflow](https://stackoverflow.com/a/44865892/2774547) By [Dorus](https://stackoverflow.com/users/402027/dorus) -( [jsBin](http://jsbin.com/riwipicilo/1/edit?html,js,console,output) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-vk8p3e?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/riwipicilo/1/edit?html,js,console,output) | [jsFiddle](https://jsfiddle.net/6yy6q0Lo/1/) ) ```js -import { fromEvent } from 'rxjs/observable/interval'; -import { sample, mapTo } 'rxjs/operators'; +// RxJS v6+ +import { fromEvent, merge } from 'rxjs'; +import { sample, mapTo } from 'rxjs/operators'; const listener = merge( - fromEvent(element, 'mousedown').mapTo(false), - fromEvent(element, 'mousemove').mapTo(true) - ) - .pipe(sample(fromEvent(element, 'mouseup'))) + fromEvent(document, 'mousedown').pipe(mapTo(false)), + fromEvent(document, 'mousemove').pipe(mapTo(true)) +) + .pipe(sample(fromEvent(document, 'mouseup'))) .subscribe(isDragging => { console.log('Were you dragging?', isDragging); - }) + }); ``` ### Additional Resources -* [sample](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-sample) +- [sample](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-sample) :newspaper: - Official docs --- diff --git a/operators/filtering/single.md b/operators/filtering/single.md index 7c4ea79f..17417c2c 100644 --- a/operators/filtering/single.md +++ b/operators/filtering/single.md @@ -10,12 +10,15 @@ ##### Example 1: Emit first number passing predicate -( [jsBin](http://jsbin.com/solecibuza/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-qhynlr?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/solecibuza/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/26r5y90s/) ) ```js -import { from } from 'rxjs/observable/from'; -import { single } 'rxjs/operators'; +// RxJS v6+ +import { from } from 'rxjs'; +import { single } from 'rxjs/operators'; //emit (1,2,3,4,5) const source = from([1, 2, 3, 4, 5]); @@ -27,7 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [single](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-single) +- [single](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-single) :newspaper: - Official docs --- diff --git a/operators/filtering/skip.md b/operators/filtering/skip.md index 7f4b2cac..353e712c 100644 --- a/operators/filtering/skip.md +++ b/operators/filtering/skip.md @@ -22,12 +22,15 @@ You could mimic `skip` by using [`filter`](./filter.md) with indexes. Ex. ##### Example 1: Skipping values before emission -( [jsBin](http://jsbin.com/hacepudabi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-o5ydjf?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/hacepudabi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/ar1eqbya/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { skip } 'rxjs/operators'; +// RxJS v6+ +import { interval } from 'rxjs'; +import { skip } from 'rxjs/operators'; //emit every 1s const source = interval(1000); @@ -39,23 +42,24 @@ const subscribe = example.subscribe(val => console.log(val)); #### Example 2: Short hand for a specific filter use case -( [jsBin](http://jsbin.com/judamurego/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-yl3ap1?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/judamurego/edit?js,console) | [jsFiddle](https://jsfiddle.net/ElHuy/4jswLn3z/) ) ```js -import { from } from 'rxjs/observable/from'; -import { skip, filter } 'rxjs/operators'; +// RxJS v6+ +import { from } from 'rxjs'; +import { skip, filter } from 'rxjs/operators'; -const numArrayObs = from([1,2,3,4,5,6,7,8,9,10]); +const numArrayObs = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // 3,4,5... -const skipObs = numArrayObs.pipe(skip(2)) - .subscribe(console.log); +const skipObs = numArrayObs.pipe(skip(2)).subscribe(console.log); // 3,4,5... -const filterObs = numArrayObs.pipe( - filter((val, index) => index > 1) - ) +const filterObs = numArrayObs + .pipe(filter((val, index) => index > 1)) .subscribe(console.log); //Same output! @@ -63,9 +67,9 @@ const filterObs = numArrayObs.pipe( ### Additional Resources -* [skip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skip) +- [skip](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skip) :newspaper: - Official docs -* [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/skipuntil.md b/operators/filtering/skipuntil.md index bd792390..ffa427b0 100644 --- a/operators/filtering/skipuntil.md +++ b/operators/filtering/skipuntil.md @@ -8,12 +8,14 @@ ##### Example 1: Skip until observable emits -( [jsBin](http://jsbin.com/tapizososu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-gs4mps?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/tapizososu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/xLu8nf77/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { interval, timer } from 'rxjs'; import { skipUntil } from 'rxjs/operators'; //emit every 1s @@ -26,7 +28,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [skipUntil](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipUntil) +- [skipUntil](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipUntil) :newspaper: - Official docs --- diff --git a/operators/filtering/skipwhile.md b/operators/filtering/skipwhile.md index 3c6ec1b4..6335f52a 100644 --- a/operators/filtering/skipwhile.md +++ b/operators/filtering/skipwhile.md @@ -10,11 +10,14 @@ ##### Example 1: Skip while values below threshold -( [jsBin](http://jsbin.com/bemikuleya/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-p5kapz?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/bemikuleya/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/3ymfxb09/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { skipWhile } from 'rxjs/operators'; //emit every 1s @@ -27,7 +30,7 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [skipWhile](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipWhile) +- [skipWhile](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipWhile) :newspaper: - Official docs --- diff --git a/operators/filtering/take.md b/operators/filtering/take.md index ba8030be..732e7b88 100644 --- a/operators/filtering/take.md +++ b/operators/filtering/take.md @@ -31,12 +31,15 @@ number of emissions while `skip` will skip the first _n_ number of emissions. ##### Example 1: Take 1 value from source -( [jsBin](http://jsbin.com/vaxitupiwi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-uk92ax?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/vaxitupiwi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/f9bz0tr3/) ) ```js -import { of } from 'rxjs/observable/of'; -import { take } 'rxjs/operators'; +// RxJS v6+ +import { of } from 'rxjs'; +import { take } from 'rxjs/operators'; //emit 1,2,3,4,5 const source = of(1, 2, 3, 4, 5); @@ -48,24 +51,28 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Take the first 5 values from source -( [jsBin](http://jsbin.com/kexenuzulu/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-3ujuth?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/kexenuzulu/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/g1fhxgua/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { take } 'rxjs/operators'; +// RxJS v6+ +import { interval } from 'rxjs'; +import { take } from 'rxjs/operators'; //emit value every 1s -const interval = interval(1000); +const interval$ = interval(1000); //take the first 5 emitted values -const example = interval.pipe(take(5)); +const example = interval$.pipe(take(5)); //output: 0,1,2,3,4 const subscribe = example.subscribe(val => console.log(val)); ``` -##### Example 3: Taking first click loclation +##### Example 3: Taking first click location -([jsFiddle](https://jsfiddle.net/ElHuy/9c5j064x/)) +([StackBlitz](https://stackblitz.com/edit/typescript-8g9xt5?file=index.ts&devtoolsheight=50) +| [jsFiddle](https://jsfiddle.net/ElHuy/9c5j064x/)) ```html
@@ -74,25 +81,27 @@ const subscribe = example.subscribe(val => console.log(val)); ``` ```js -import { fromEvent } from 'rxjs/observable/fromEvent'; -import { take, tap } 'rxjs/operators'; +// RxJS v6+ +import { fromEvent } from 'rxjs'; +import { take, tap } from 'rxjs/operators'; const oneClickEvent = fromEvent(document, 'click').pipe( - take(1), - tap(v => { - document.getElementById('locationDisplay').innerHTML - = `Your first click was on location ${v.screenX}:${v.screenY}`; - }) - ) + take(1), + tap(v => { + document.getElementById( + 'locationDisplay' + ).innerHTML = `Your first click was on location ${v.screenX}:${v.screenY}`; + }) +); const subscribe = oneClickEvent.subscribe(); ``` ### Additional Resources -* [take](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-take) +- [take](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-take) :newspaper: - Official docs -* [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: take, first, skip](https://egghead.io/lessons/rxjs-filtering-operators-take-first-skip?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/takeuntil.md b/operators/filtering/takeuntil.md index eb5c734e..295e807c 100644 --- a/operators/filtering/takeuntil.md +++ b/operators/filtering/takeuntil.md @@ -16,32 +16,37 @@ ##### Example 1: Take values until timer emits -( [jsBin](http://jsbin.com/yevuhukeja/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-ujwjbg?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/yevuhukeja/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/zbe9dzb9/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { timer } from 'rxjs/observable/timer'; -import { takeUntil } 'rxjs/operators'; +// RxJS v6+ +import { interval, timer } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; //emit value every 1s const source = interval(1000); //after 5 seconds, emit value -const timer = timer(5000); +const timer$ = timer(5000); //when timer emits after 5s, complete source -const example = source.pipe(takeUntil(timer)); +const example = source.pipe(takeUntil(timer$)); //output: 0,1,2,3 const subscribe = example.subscribe(val => console.log(val)); ``` ##### Example 2: Take the first 5 even numbers -( [jsBin](http://jsbin.com/doquqecara/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-djhv7s?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/doquqecara/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/0dLeksLe/) ) ```js +// RxJS v6+ import { interval } from 'rxjs/observable/interval'; -import { takeUntil, filter, scan, map, withLatestFrom } 'rxjs/operators'; +import { takeUntil, filter, scan, map, withLatestFrom } from 'rxjs/operators'; //emit value every 1s const source = interval(1000); @@ -55,12 +60,12 @@ const evenNumberCount = evenSource.pipe(scan((acc, _) => acc + 1, 0)); const fiveEvenNumbers = evenNumberCount.pipe(filter(val => val > 5)); const example = evenSource.pipe( - //also give me the current even number count for display - withLatestFrom(evenNumberCount), - map(([val, count]) => `Even number (${count}) : ${val}`), - //when five even numbers have been emitted, complete source observable - takeUntil(fiveEvenNumbers) - ) + //also give me the current even number count for display + withLatestFrom(evenNumberCount), + map(([val, count]) => `Even number (${count}) : ${val}`), + //when five even numbers have been emitted, complete source observable + takeUntil(fiveEvenNumbers) +); /* Even number (1) : 0, Even number (2) : 2 @@ -73,9 +78,9 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [takeUntil](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeUntil) +- [takeUntil](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeUntil) :newspaper: - Official docs -* [Stopping a stream with takeUntil](https://egghead.io/lessons/rxjs-stopping-a-stream-with-takeuntil?course=step-by-step-async-javascript-with-rxjs) +- [Stopping a stream with takeUntil](https://egghead.io/lessons/rxjs-stopping-a-stream-with-takeuntil?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist --- diff --git a/operators/filtering/takewhile.md b/operators/filtering/takewhile.md index a3b89392..9d323d28 100644 --- a/operators/filtering/takewhile.md +++ b/operators/filtering/takewhile.md @@ -10,12 +10,15 @@ ##### Example 1: Take values under limit -( [jsBin](http://jsbin.com/zanefaqexu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-af3hdf?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/zanefaqexu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/yakd4jgc/) ) ```js -import { of } from 'rxjs/observable/of'; -import { takeWhile } 'rxjs/operators'; +// RxJS v6+ +import { of } from 'rxjs'; +import { takeWhile } from 'rxjs/operators'; //emit 1,2,3,4,5 const source = of(1, 2, 3, 4, 5); @@ -27,12 +30,15 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Difference between takeWhile() and filter() -( [jsBin](http://jsbin.com/yatoqurewi/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-roozza?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/yatoqurewi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/r497jgw3/4/) ) ```js -import { of } from 'rxjs/observable/of'; -import { takeWhile, filter } 'rxjs/operators'; +// RxJS v6+ +import { of } from 'rxjs'; +import { takeWhile, filter } from 'rxjs/operators'; // emit 3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3 const source = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3); @@ -41,8 +47,7 @@ const source = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3); // output: [3, 3, 3] source .pipe(takeWhile(it => it === 3)) - .subscribe(val => console.log('takeWhile', val)) - + .subscribe(val => console.log('takeWhile', val)); // output: [3, 3, 3, 3, 3, 3, 3] source @@ -52,13 +57,13 @@ source ### Related Recipes -* [Smart Counter](../../recipes/smartcounter.md) +- [Smart Counter](../../recipes/smartcounter.md) ### Additional Resources -* [takeWhile](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile) +- [takeWhile](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile) :newspaper: - Official docs -* [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) +- [Completing a stream with takeWhile](https://egghead.io/lessons/rxjs-completing-a-stream-with-takewhile?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist --- diff --git a/operators/filtering/throttle.md b/operators/filtering/throttle.md index d6a59638..0e0159ab 100644 --- a/operators/filtering/throttle.md +++ b/operators/filtering/throttle.md @@ -10,11 +10,14 @@ ##### Example 1: Throttle for 2 seconds, based on second observable -( [jsBin](http://jsbin.com/wohefujipo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-pfcmjw?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/wohefujipo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/h8na4m0p/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { throttle } from 'rxjs/operators'; //emit value every 1 second @@ -27,11 +30,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Throttle with promise -( [jsBin](http://jsbin.com/seyaguwunu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-g74v3q?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/seyaguwunu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/w5Lbzz9f/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { throttle, map } from 'rxjs/operators'; //emit value every 1 second @@ -42,21 +48,19 @@ const promise = val => setTimeout(() => resolve(`Resolved: ${val}`), val * 100) ); //when promise resolves emit item from source -const example = source - .pipe( - throttle(promise), - map(val => `Throttled off Promise: ${val}`); - ); - +const example = source.pipe( + throttle(promise), + map(val => `Throttled off Promise: ${val}`) +); const subscribe = example.subscribe(val => console.log(val)); ``` ### Additional Resources -* [throttle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttle) +- [throttle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttle) :newspaper: - Official docs -* [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/filtering/throttletime.md b/operators/filtering/throttletime.md index 53a82b13..e5d09c61 100644 --- a/operators/filtering/throttletime.md +++ b/operators/filtering/throttletime.md @@ -10,12 +10,15 @@ ##### Example 1: Receive latest value every 5 seconds -( [jsBin](http://jsbin.com/koqujayizo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-en2zqe?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/koqujayizo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/4zysLc3y/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { throttleTime } 'rxjs/operators'; +// RxJS v6+ +import { interval } from 'rxjs'; +import { throttleTime } from 'rxjs/operators'; //emit value every 1 second const source = interval(1000); @@ -30,12 +33,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Throttle merged observable -( [jsBin](http://jsbin.com/takipadaza/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-bkcjfj?file=index.ts&devtoolsheight=100) +| [jsBin](http://jsbin.com/takipadaza/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/xhd1zy3m/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { merge } from 'rxjs/observable/merge'; +// RxJS v6+ +import { interval, merge } from 'rxjs'; import { throttleTime, ignoreElements } from 'rxjs/operators'; const source = merge( @@ -52,9 +57,9 @@ const subscribe = example.subscribe(val => console.log(val)); ### Additional Resources -* [throttleTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttleTime) +- [throttleTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttleTime) :newspaper: - Official docs -* [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) +- [Filtering operator: throttle and throttleTime](https://egghead.io/lessons/rxjs-filtering-operators-throttle-and-throttletime?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/multicasting/multicast.md b/operators/multicasting/multicast.md index 172ce1fa..d634bda7 100644 --- a/operators/multicasting/multicast.md +++ b/operators/multicasting/multicast.md @@ -11,13 +11,13 @@ ##### Example 1: multicast with standard Subject ( -[StackBlitz](https://stackblitz.com/edit/typescript-tmyiu7?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-vge8sk?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/zexuyosuvi/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/x2z7p1gm/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { Subject } from 'rxjs/Subject'; +// RxJS v6+ +import { Subject, interval } from 'rxjs'; import { take, tap, multicast, mapTo } from 'rxjs/operators'; //emit every 2 seconds, take 5 @@ -48,13 +48,13 @@ multi.connect(); ##### Example 2: multicast with ReplaySubject ( -[StackBlitz](https://stackblitz.com/edit/typescript-gdhvct?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-n5ghjj?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/ruhexuhike/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/oj68u58j/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { ReplaySubject } from 'rxjs/ReplaySubject'; +// RxJS v6+ +import { interval, ReplaySubject } from 'rxjs'; import { take, multicast, tap, mapTo } from 'rxjs/operators'; //emit every 2 seconds, take 5 @@ -82,7 +82,7 @@ setTimeout(() => { ### Additional Resources -* [multicast](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-multicast) +- [multicast](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-multicast) :newspaper: - Official docs --- diff --git a/operators/multicasting/publish.md b/operators/multicasting/publish.md index b7b953b2..06562f32 100644 --- a/operators/multicasting/publish.md +++ b/operators/multicasting/publish.md @@ -11,12 +11,13 @@ ##### Example 1: Connect observable after subscribers ( -[StackBlitz](https://stackblitz.com/edit/typescript-gdhvct?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-zje8ms?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/laguvecixi/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/fpe6csaz/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { publish, tap } from 'rxjs/operators'; //emit value every 1 second @@ -53,7 +54,7 @@ setTimeout(() => { ### Additional Resources -* [publish](http://reactivex-rxjs5.surge.sh/function/index.html#static-function-publish) +- [publish](http://reactivex-rxjs5.surge.sh/function/index.html#static-function-publish) :newspaper: - Official docs > :file_folder: Source Code: diff --git a/operators/multicasting/share.md b/operators/multicasting/share.md index 889cc1f2..fc343151 100644 --- a/operators/multicasting/share.md +++ b/operators/multicasting/share.md @@ -17,12 +17,13 @@ ##### Example 1: Multiple subscribers sharing source ( -[StackBlitz](https://stackblitz.com/edit/typescript-ufnzzz?file=index.ts&devtoolsheight=100) +[StackBlitz](https://stackblitz.com/edit/typescript-dlaa1p?file=index.ts&devtoolsheight=100) | [jsBin](http://jsbin.com/jobiyomari/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/Lmesxxaq/) ) ```js -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { timer } from 'rxjs'; import { tap, mapTo, share } from 'rxjs/operators'; //emit value in 1s @@ -59,14 +60,14 @@ const subscribeFour = sharedExample.subscribe(val => console.log(val)); ### Related Recipes -* [Progress Bar](../../recipes/progressbar.md) -* [Game Loop](../../recipes/gameloop.md) +- [Progress Bar](../../recipes/progressbar.md) +- [Game Loop](../../recipes/gameloop.md) ### Additional Resources -* [share](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-share) +- [share](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-share) :newspaper: - Official docs -* [Sharing streams with share](https://egghead.io/lessons/rxjs-sharing-streams-with-share?course=step-by-step-async-javascript-with-rxjs) +- [Sharing streams with share](https://egghead.io/lessons/rxjs-sharing-streams-with-share?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist --- diff --git a/operators/multicasting/sharereplay.md b/operators/multicasting/sharereplay.md index 6c4b46d1..b0d92e40 100644 --- a/operators/multicasting/sharereplay.md +++ b/operators/multicasting/sharereplay.md @@ -139,11 +139,13 @@ source, sending values through an internal `ReplaySubject`: ##### Example 1: Multiple subscribers sharing source -( [Stackblitz](https://stackblitz.com/edit/typescript-qfhryg?file=index.ts&devtoolsheight=50) ) +( +[Stackblitz](https://stackblitz.com/edit/typescript-9cfnxm?file=index.ts&devtoolsheight=100) +) ```js -import { Subject } from 'rxjs/Subject'; -import { ReplaySubject } from 'rxjs/ReplaySubject'; +// RxJS v6+ +import { Subject, ReplaySubject } from 'rxjs'; import { pluck, share, shareReplay, tap } from 'rxjs/operators'; // simulate url change with subject @@ -166,7 +168,7 @@ const lateSubscriber = lastUrl.subscribe(console.log); ### Additional Resources -* [shareReplay](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-shareReplay) +- [shareReplay](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-shareReplay) :newspaper: - Official docs --- diff --git a/operators/transformation/buffer.md b/operators/transformation/buffer.md index cb7b5380..46181d2a 100644 --- a/operators/transformation/buffer.md +++ b/operators/transformation/buffer.md @@ -15,8 +15,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/7451s67k/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { fromEvent } from 'rxjs/observable/fromEvent'; +// RxJS v6+ +import { interval, fromEvent } from 'rxjs'; import { buffer } from 'rxjs/operators'; //Create an observable that emits a value every second diff --git a/operators/transformation/buffercount.md b/operators/transformation/buffercount.md index 3adf7624..fe04ba70 100644 --- a/operators/transformation/buffercount.md +++ b/operators/transformation/buffercount.md @@ -15,7 +15,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/ky9myc5b/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { bufferCount } from 'rxjs/operators'; //Create an observable that emits a value every second @@ -36,6 +37,7 @@ const subscribe = bufferThree.subscribe(val => [jsFiddle](https://jsfiddle.net/btroncone/3c67qcz1/) ) ```js +// RxJS v6+ import { interval } from 'rxjs/observable/interval'; import { bufferCount } from 'rxjs/operators'; diff --git a/operators/transformation/buffertime.md b/operators/transformation/buffertime.md index 8a3b00cd..aeb4c3f5 100644 --- a/operators/transformation/buffertime.md +++ b/operators/transformation/buffertime.md @@ -12,6 +12,9 @@ [jsFiddle](https://jsfiddle.net/btroncone/vx7vwg01/) ) ```js +// RxJS v6+ +import { bufferTime, interval } from 'rxjs'; + //Create an observable that emits a value every 500ms const source = Rx.Observable.interval(500); //After 2 seconds have passed, emit buffered values as an array @@ -29,8 +32,8 @@ const subscribe = example.subscribe(val => [jsFiddle](https://jsfiddle.net/btroncone/7k4ygj1x/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { bufferTime } from 'rxjs/operators'; +// RxJS v6+ +import { bufferTime, interval } from 'rxjs'; //Create an observable that emits a value every 500ms const source = interval(500); diff --git a/operators/transformation/buffertoggle.md b/operators/transformation/buffertoggle.md index 2f49484b..cd46c267 100644 --- a/operators/transformation/buffertoggle.md +++ b/operators/transformation/buffertoggle.md @@ -14,7 +14,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/6ad3w3wf/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { bufferToggle } from 'rxjs/operators'; //emit value every second diff --git a/operators/transformation/bufferwhen.md b/operators/transformation/bufferwhen.md index fb09e9de..973a27c8 100644 --- a/operators/transformation/bufferwhen.md +++ b/operators/transformation/bufferwhen.md @@ -14,7 +14,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/nr9agfuL/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { bufferWhen } from 'rxjs/operators'; //emit value every 1 second diff --git a/operators/transformation/concatmap.md b/operators/transformation/concatmap.md index db7d62d9..659d5d8d 100644 --- a/operators/transformation/concatmap.md +++ b/operators/transformation/concatmap.md @@ -20,7 +20,8 @@ inner observables, the observable with the lesser delay (1000ms) will emit, followed by the observable which takes 2000ms to complete. ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { concatMap, delay, mergeMap } from 'rxjs/operators'; //emit delay value @@ -51,7 +52,8 @@ const mergeMapExample = source [jsFiddle](https://jsfiddle.net/btroncone/Lym33L97//) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { concatMap } from 'rxjs/operators'; //emit 'Hello' and 'Goodbye' @@ -73,7 +75,8 @@ const subscribe = example.subscribe(val => [jsFiddle](https://jsfiddle.net/btroncone/5sr5zzgy/) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { concatMap } from 'rxjs/operators'; //emit 'Hello' and 'Goodbye' diff --git a/operators/transformation/concatmapto.md b/operators/transformation/concatmapto.md index 910c41bb..91484d3c 100644 --- a/operators/transformation/concatmapto.md +++ b/operators/transformation/concatmapto.md @@ -13,8 +13,8 @@ ( [StackBlitz](https://stackblitz.com/edit/typescript-fkkh6c?file=index.ts&devtoolsheight=50) ) ```js -import { of } from 'rxjs/observable/of'; -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { of, interval } from 'rxjs'; import { concatMapTo, delay, take } from 'rxjs/operators'; //emit value every 2 seconds @@ -34,7 +34,8 @@ const subscribe = example.subscribe(val => console.log(val)); [jsFiddle](https://jsfiddle.net/btroncone/s19wtscb/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { concatMapTo, take } from 'rxjs/operators'; //emit value every 2 seconds const interval = interval(2000); diff --git a/operators/transformation/exhaustmap.md b/operators/transformation/exhaustmap.md index 40db8b56..eef654e7 100644 --- a/operators/transformation/exhaustmap.md +++ b/operators/transformation/exhaustmap.md @@ -15,9 +15,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/9ovzapp9/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { merge } from 'rxjs/observable/merge'; -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { interval, merge, of } from 'rxjs'; import { delay, take, exhaustMap } from 'rxjs/operators'; const sourceInterval = interval(1000); @@ -52,7 +51,8 @@ const exhaustSub = merge( [jsFiddle](https://jsfiddle.net/btroncone/5ck8yg5k/3/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { exhaustMap, tap, take } from 'rxjs/operators'; const firstInterval = interval(1000).pipe(take(10)); diff --git a/operators/transformation/expand.md b/operators/transformation/expand.md index 87ee4e93..172f477b 100644 --- a/operators/transformation/expand.md +++ b/operators/transformation/expand.md @@ -15,8 +15,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/nu4apbLt/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { interval, of } from 'rxjs'; import { expand, take } from 'rxjs/operators'; //emit 2 diff --git a/operators/transformation/groupby.md b/operators/transformation/groupby.md index fd0b6a02..d946e7e7 100644 --- a/operators/transformation/groupby.md +++ b/operators/transformation/groupby.md @@ -15,7 +15,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/utncxxvf/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { groupBy, mergeMap, toArray } from 'rxjs/operators'; const people = [ diff --git a/operators/transformation/map.md b/operators/transformation/map.md index baef2114..07844b99 100644 --- a/operators/transformation/map.md +++ b/operators/transformation/map.md @@ -15,7 +15,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/yd38awLa/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { map } from 'rxjs/operators'; //emit (1,2,3,4,5) @@ -33,7 +34,8 @@ const subscribe = example.subscribe(val => console.log(val)); [jsFiddle](https://jsfiddle.net/btroncone/tdLd5tgc/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { map } from 'rxjs/operators'; //emit ({name: 'Joe', age: 30}, {name: 'Frank', age: 20},{name: 'Ryan', age: 50}) diff --git a/operators/transformation/mapto.md b/operators/transformation/mapto.md index 7468087a..d4e4cfbd 100644 --- a/operators/transformation/mapto.md +++ b/operators/transformation/mapto.md @@ -16,7 +16,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/4ojq56ng/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { mapTo } from 'rxjs/operators'; //emit value every two seconds @@ -35,7 +36,8 @@ const subscribe = example.subscribe(val => console.log(val)); [jsFiddle](https://jsfiddle.net/btroncone/52fqL4nn/) ) ```js -import { fromEvent } from 'rxjs/observable/fromEvent'; +// RxJS v6+ +import { fromEvent } from 'rxjs'; import { mapTo } from 'rxjs/operators'; //emit every click on document diff --git a/operators/transformation/mergemap.md b/operators/transformation/mergemap.md index b8723583..05818a40 100644 --- a/operators/transformation/mergemap.md +++ b/operators/transformation/mergemap.md @@ -51,7 +51,8 @@ can also limit the number of active inner subscriptions at a time with the [jsFiddle](https://jsfiddle.net/btroncone/41awjgda/) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; //emit 'Hello' @@ -70,7 +71,8 @@ const subscribe = example.subscribe(val => console.log(val)); [jsFiddle](https://jsfiddle.net/btroncone/o9kxpvsv/) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; //emit 'Hello' @@ -92,7 +94,8 @@ const subscribe = example.subscribe(val => console.log(val)); [jsFiddle](https://jsfiddle.net/btroncone/zu9a6vr4/) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; /* @@ -124,7 +127,8 @@ const subscribe = example.subscribe(val => console.log(val)); [jsFiddle](https://jsfiddle.net/btroncone/2rmLxpyz/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { mergeMap, take } from 'rxjs/operators'; //emit value every 1s diff --git a/operators/transformation/partition.md b/operators/transformation/partition.md index 55dfc81d..7937ab0a 100644 --- a/operators/transformation/partition.md +++ b/operators/transformation/partition.md @@ -15,7 +15,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/q0xo7gvv/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from } from 'rxjs'; import { partition, map } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5, 6]); @@ -43,9 +44,8 @@ const subscribe = merge( [jsFiddle](https://jsfiddle.net/btroncone/fe246u5p/) ) ```js -import { from } from 'rxjs/observable/from'; -import { of } from 'rxjs/observable/of'; -import { merge } from 'rxjs/observable/merge'; +// RxJS v6+ +import { merge, of, from } from 'rxjs'; import { map, partition, catchError } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5, 6]); diff --git a/operators/transformation/pluck.md b/operators/transformation/pluck.md index 08b1ed12..12369dfa 100644 --- a/operators/transformation/pluck.md +++ b/operators/transformation/pluck.md @@ -15,6 +15,7 @@ [jsFiddle](https://jsfiddle.net/btroncone/58v9xq0f/) ) ```js +// RxJS v6+ import { from } from 'rxjs/observable/from'; import { pluck } from 'rxjs/operators'; @@ -32,6 +33,7 @@ const subscribe = example.subscribe(val => console.log(val)); [jsFiddle](https://jsfiddle.net/btroncone/n592m597/) ) ```js +// RxJS v6+ import { from } from 'rxjs/observable/from'; import { pluck } from 'rxjs/operators'; diff --git a/operators/transformation/reduce.md b/operators/transformation/reduce.md index 6eae8c40..16fd7354 100644 --- a/operators/transformation/reduce.md +++ b/operators/transformation/reduce.md @@ -16,13 +16,15 @@ ##### Example 1: Sum a stream of numbers -( [StackBlitz](https://stackblitz.com/edit/typescript-bbmye7?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/dakuneneho/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-bbmye7?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/dakuneneho/edit?js,console) | [jsFiddle](https://jsfiddle.net/f8fw7yka/) ) ```js +// RxJS v6+ import { of } from 'rxjs/observable/of'; -import { reduce } from 'rxjs/operators'; +import { reduce } from 'rxjs'; const source = of(1, 2, 3, 4); const example = source.pipe(reduce((acc, val) => acc + val)); @@ -32,9 +34,9 @@ const subscribe = example.subscribe(val => console.log('Sum:', val)); ### Additional Resources -* [reduce](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-reduce) +- [reduce](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-reduce) :newspaper: - Official docs -* [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) +- [Scan() vs reduce() | RxJS TUTORIAL](https://www.youtube.com/watch?v=myEeo2rZc3g) :video_camera: - Academind --- diff --git a/operators/transformation/scan.md b/operators/transformation/scan.md index 691b3a24..5c0f78bc 100644 --- a/operators/transformation/scan.md +++ b/operators/transformation/scan.md @@ -17,10 +17,13 @@ scan! ##### Example 1: Sum over time -( [StackBlitz](https://stackblitz.com/edit/typescript-jkisea?file=index.ts&devtoolsheight=50) ) +( +[StackBlitz](https://stackblitz.com/edit/typescript-jkisea?file=index.ts&devtoolsheight=50) +) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { scan } from 'rxjs/operators'; const source = of(1, 2, 3); @@ -33,12 +36,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Accumulating an object -( [StackBlitz](https://stackblitz.com/edit/typescript-pjmrta?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/fusunoguqu/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-pjmrta?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/fusunoguqu/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/36rbu38b/) ) ```js -import { Subject } from 'rxjs/Subject'; +// RxJS v6+ +import { Subject } from 'rxjs'; import { scan } from 'rxjs/operators'; const subject = new Subject(); @@ -61,10 +66,13 @@ subject.next({ favoriteLanguage: 'JavaScript' }); ##### Example 3: Emitting random values from the accumulated array. -( [StackBlitz](https://stackblitz.com/edit/typescript-sxhtbf?file=index.ts&devtoolsheight=50) ) +( +[StackBlitz](https://stackblitz.com/edit/typescript-sxhtbf?file=index.ts&devtoolsheight=50) +) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { scan, map, distinctUntilChanged } from 'rxjs/operators'; // Accumulate values in an array, emit random values from this array. @@ -79,18 +87,18 @@ const scanObs = interval(1000) ### Related Recipes -* [Smart Counter](../../recipes/smartcounter.md) -* [Progress Bar](../../recipes/progressbar.md) +- [Smart Counter](../../recipes/smartcounter.md) +- [Progress Bar](../../recipes/progressbar.md) ### Additional Resources -* [scan](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan) +- [scan](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan) :newspaper: - Official docs -* [Aggregating streams with reduce and scan using RxJS](https://egghead.io/lessons/rxjs-aggregating-streams-with-reduce-and-scan-using-rxjs) +- [Aggregating streams with reduce and scan using RxJS](https://egghead.io/lessons/rxjs-aggregating-streams-with-reduce-and-scan-using-rxjs) :video_camera: - Ben Lesh -* [Updating data with scan](https://egghead.io/lessons/rxjs-updating-data-with-scan?course=step-by-step-async-javascript-with-rxjs) +- [Updating data with scan](https://egghead.io/lessons/rxjs-updating-data-with-scan?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist -* [Transformation operator: scan](https://egghead.io/lessons/rxjs-transformation-operator-scan?course=rxjs-beyond-the-basics-operators-in-depth) +- [Transformation operator: scan](https://egghead.io/lessons/rxjs-transformation-operator-scan?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/transformation/switchmap.md b/operators/transformation/switchmap.md index 9f0e7d91..b79c8de7 100644 --- a/operators/transformation/switchmap.md +++ b/operators/transformation/switchmap.md @@ -44,13 +44,14 @@ cancel a request if the source emits quickly enough. In these scenarios ##### Example 1: Restart interval every 5 seconds -( [StackBlitz](https://stackblitz.com/edit/typescript-hbuxqv?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/birepuveya/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-hbuxqv?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/birepuveya/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/6pz981gd/) ) ```js -import { timer } from 'rxjs/observable/timer'; -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { timer, interval } from 'rxjs'; import { switchMap } from 'rxjs/operators'; //emit immediately, then every 5s @@ -63,13 +64,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 2: Reset on every click -( [StackBlitz](https://stackblitz.com/edit/typescript-kki7qa?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/zoruboxogo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-kki7qa?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/zoruboxogo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/y11v8aqz/) ) ```js -import { fromEvent } from 'rxjs/observable/fromEvent'; -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval, fromEvent } from 'rxjs'; import { switchMap, mapTo } from 'rxjs/operators'; //emit every click @@ -84,13 +86,14 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 3: Using a `resultSelector` function -( [StackBlitz](https://stackblitz.com/edit/typescript-gwav6n?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/qobapubeze/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-gwav6n?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/qobapubeze/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/nqfu534y/) ) ```js -import { timer } from 'rxjs/observable/timer'; -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { timer, interval } from 'rxjs'; import { switchMap } from 'rxjs/operators'; //emit immediately, then every 5s @@ -119,13 +122,13 @@ const subscribe = example.subscribe(val => console.log(val)); ##### Example 4: Countdown timer with switchMap -( [StackBlitz](https://stackblitz.com/edit/typescript-ur5svp?file=index.ts&devtoolsheight=50) ) +( +[StackBlitz](https://stackblitz.com/edit/typescript-ur5svp?file=index.ts&devtoolsheight=50) +) ```js -import { interval } from 'rxjs/observable/interval'; -import { fromEvent } from 'rxjs/observable/fromEvent'; -import { merge } from 'rxjs/observable/merge'; -import { empty } from 'rxjs/observable/empty'; +// RxJS v6+ +import { interval, fromEvent, merge, empty } from 'rxjs'; import { switchMap, scan, takeWhile, startWith, mapTo } from 'rxjs/operators'; const countdownSeconds = 10; @@ -163,20 +166,21 @@ Resume Timer ### Related Recipes -* [Smart Counter](../../recipes/smartcounter.md) -* [Progress Bar](../../recipes/progressbar.md) -* [HTTP Polling](../../recipes/http-polling.md) +- [Smart Counter](../../recipes/smartcounter.md) +- [Progress Bar](../../recipes/progressbar.md) +- [HTTP Polling](../../recipes/http-polling.md) ### Additional Resources -* [switchMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap) +- [switchMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap) :newspaper: - Official docs -* [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - Nicholas Jamieson -* [Starting a stream with switchMap](https://egghead.io/lessons/rxjs-starting-a-stream-with-switchmap?course=step-by-step-async-javascript-with-rxjs) +- [Avoiding switchMap-Related Bugs](https://blog.angularindepth.com/switchmap-bugs-b6de69155524) - + Nicholas Jamieson +- [Starting a stream with switchMap](https://egghead.io/lessons/rxjs-starting-a-stream-with-switchmap?course=step-by-step-async-javascript-with-rxjs) :video_camera: :dollar: - John Linquist -* [Use RxJS switchMap to map and flatten higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-switchmap-to-map-and-flatten-higher-order-observables?course=use-higher-order-observables-in-rxjs-effectively) +- [Use RxJS switchMap to map and flatten higher order observables](https://egghead.io/lessons/rxjs-use-rxjs-switchmap-to-map-and-flatten-higher-order-observables?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz -* [Use switchMap as a safe default to flatten observables in RxJS](https://egghead.io/lessons/rxjs-use-switchmap-as-a-safe-default-to-flatten-observables-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) +- [Use switchMap as a safe default to flatten observables in RxJS](https://egghead.io/lessons/rxjs-use-switchmap-as-a-safe-default-to-flatten-observables-in-rxjs?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz --- diff --git a/operators/transformation/window.md b/operators/transformation/window.md index 96d943fc..190fc542 100644 --- a/operators/transformation/window.md +++ b/operators/transformation/window.md @@ -8,12 +8,14 @@ ##### Example 1: Open window specified by inner observable -( [StackBlitz](https://stackblitz.com/edit/typescript-qt3rbn?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/jituvajeri/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-qt3rbn?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/jituvajeri/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/rmgghg6d/) ) ```js -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { timer } from 'rxjs'; import { window, scan, mergeAll } from 'rxjs/operators'; //emit immediately then every 1s @@ -39,9 +41,9 @@ const subscribeTwo = example ### Additional Resources -* [window](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-window) +- [window](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-window) :newspaper: - Official docs -* [Split an RxJS observable with window](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-with-window?course=use-higher-order-observables-in-rxjs-effectively) +- [Split an RxJS observable with window](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-with-window?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz --- diff --git a/operators/transformation/windowcount.md b/operators/transformation/windowcount.md index f7196c7a..cb814491 100644 --- a/operators/transformation/windowcount.md +++ b/operators/transformation/windowcount.md @@ -10,12 +10,14 @@ ##### Example 1: Start new window every x items emitted -( [StackBlitz](https://stackblitz.com/edit/typescript-uhg3vb?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/nezuvacexe/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-uhg3vb?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/nezuvacexe/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/xjgbnqp5/) ) ```js -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval } from 'rxjs'; import { windowCount, mergeAll, tap } from 'rxjs/operators'; //emit every 1s @@ -49,7 +51,7 @@ const subscribeTwo = example ### Additional Resources -* [windowCount](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowCount) +- [windowCount](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowCount) :newspaper: - Official docs --- diff --git a/operators/transformation/windowtime.md b/operators/transformation/windowtime.md index 3738c7c7..4e97a9e1 100644 --- a/operators/transformation/windowtime.md +++ b/operators/transformation/windowtime.md @@ -10,12 +10,14 @@ ##### Example 1: Open new window every specified duration -( [StackBlitz](https://stackblitz.com/edit/typescript-vkkkef?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/mifayacoqo/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-vkkkef?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/mifayacoqo/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/g04b3qeb/) ) ```js -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { timer } from 'rxjs'; import { windowTime, tap, mergeAll } from 'rxjs/operators'; //emit immediately then every 1s @@ -47,7 +49,7 @@ const subscribeTwo = example ### Additional Resources -* [windowTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowTime) +- [windowTime](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowTime) :newspaper: - Official docs --- diff --git a/operators/transformation/windowtoggle.md b/operators/transformation/windowtoggle.md index 2131287a..ca8341c3 100644 --- a/operators/transformation/windowtoggle.md +++ b/operators/transformation/windowtoggle.md @@ -10,13 +10,14 @@ ##### Example 1: Toggle window at increasing interval -( [StackBlitz](https://stackblitz.com/edit/typescript-t14gn2?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/xasofupuka/1/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-t14gn2?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/xasofupuka/1/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/3xmmuzy4/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { timer, interval } from 'rxjs'; import { tap, windowToggle, mergeAll } from 'rxjs/operators'; //emit immediately then every 1s @@ -54,9 +55,9 @@ const subscribeTwo = example ### Additional Resources -* [windowToggle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowToggle) +- [windowToggle](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowToggle) :newspaper: - Official docs -* [Split an RxJS observable conditionally with windowToggle](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-conditionally-with-windowtoggle?course=use-higher-order-observables-in-rxjs-effectively) +- [Split an RxJS observable conditionally with windowToggle](https://egghead.io/lessons/rxjs-split-an-rxjs-observable-conditionally-with-windowtoggle?course=use-higher-order-observables-in-rxjs-effectively) :video_camera: :dollar: - André Staltz --- diff --git a/operators/transformation/windowwhen.md b/operators/transformation/windowwhen.md index 9dcea3b8..46de6427 100644 --- a/operators/transformation/windowwhen.md +++ b/operators/transformation/windowwhen.md @@ -10,13 +10,14 @@ ##### Example 1: Open and close window at interval -( [StackBlitz](https://stackblitz.com/edit/typescript-bgpaoi?file=index.ts&devtoolsheight=50) | -[jsBin](http://jsbin.com/tuhaposemo/edit?js,console) | +( +[StackBlitz](https://stackblitz.com/edit/typescript-bgpaoi?file=index.ts&devtoolsheight=50) +| [jsBin](http://jsbin.com/tuhaposemo/edit?js,console) | [jsFiddle](https://jsfiddle.net/btroncone/gnx9fb3h/) ) ```js -import { timer } from 'rxjs/observable/timer'; -import { interval } from 'rxjs/observable/interval'; +// RxJS v6+ +import { interval, timer } from 'rxjs'; import { windowWhen, tap, mergeAll } from 'rxjs/operators'; //emit immediately then every 1s @@ -52,7 +53,7 @@ const subscribeTwo = example ### Additional Resources -* [windowWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowWhen) +- [windowWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowWhen) :newspaper: - Official docs --- diff --git a/operators/utility/delay.md b/operators/utility/delay.md index cd48e9fa..eb4abc2e 100644 --- a/operators/utility/delay.md +++ b/operators/utility/delay.md @@ -16,8 +16,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/1kxtzcu6/) ) ```js -import { of } from 'rxjs/observable/of'; -import { merge } from 'rxjs/observable/merge'; +// RxJS v6+ +import { of, merge } from 'rxjs'; import { mapTo, delay } from 'rxjs/operators'; //emit one item @@ -25,9 +25,18 @@ const example = of(null); //delay output of each by an extra second const message = merge( example.pipe(mapTo('Hello')), - example.pipe(mapTo('World!'), delay(1000)), - example.pipe(mapTo('Goodbye'), delay(2000)), - example.pipe(mapTo('World!'), delay(3000)) + example.pipe( + mapTo('World!'), + delay(1000) + ), + example.pipe( + mapTo('Goodbye'), + delay(2000) + ), + example.pipe( + mapTo('World!'), + delay(3000) + ) ); //output: 'Hello'...'World!'...'Goodbye'...'World!' const subscribe = message.subscribe(val => console.log(val)); @@ -35,13 +44,13 @@ const subscribe = message.subscribe(val => console.log(val)); ### Related Recipes -* [Progress Bar](../../recipes/progressbar.md) +- [Progress Bar](../../recipes/progressbar.md) ### Additional Resources -* [delay](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delay) +- [delay](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delay) :newspaper: - Official docs -* [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) +- [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/utility/delaywhen.md b/operators/utility/delaywhen.md index 2ac7bcd7..a4f5c596 100644 --- a/operators/utility/delaywhen.md +++ b/operators/utility/delaywhen.md @@ -16,8 +16,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/b057mxkL/) ) ```js -import { interval } from 'rxjs/observable/interval'; -import { timer } from 'rxjs/observable/timer'; +// RxJS v6+ +import { interval, timer } from 'rxjs'; import { delayWhen } from 'rxjs/operators'; //emit value every second @@ -33,9 +33,9 @@ const subscribe = delayWhenExample.subscribe(val => console.log(val)); ### Additional Resources -* [delayWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delayWhen) +- [delayWhen](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delayWhen) :newspaper: - Official docs -* [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) +- [Transformation operator: delay and delayWhen](https://egghead.io/lessons/rxjs-transformation-operators-delay-and-delaywhen?course=rxjs-beyond-the-basics-operators-in-depth) :video_camera: :dollar: - André Staltz --- diff --git a/operators/utility/dematerialize.md b/operators/utility/dematerialize.md index a3750bdc..569c4a3c 100644 --- a/operators/utility/dematerialize.md +++ b/operators/utility/dematerialize.md @@ -16,9 +16,9 @@ [jsFiddle](https://jsfiddle.net/btroncone/jw08mouy/) ) ```js -import { from } from 'rxjs/observable/from'; +// RxJS v6+ +import { from, Notification } from 'rxjs/observable/from'; import { dematerialize } from 'rxjs/operators'; -import { Notification } from 'rxjs/Notification'; //emit next and error notifications const source = from([ diff --git a/operators/utility/do.md b/operators/utility/do.md index 7cb79e97..3c0f8e71 100644 --- a/operators/utility/do.md +++ b/operators/utility/do.md @@ -22,7 +22,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/qtyakorq/) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { tap, map } from 'rxjs/operators'; const source = of(1, 2, 3, 4, 5); diff --git a/operators/utility/let.md b/operators/utility/let.md index 8a9064ff..39ac5997 100644 --- a/operators/utility/let.md +++ b/operators/utility/let.md @@ -4,6 +4,13 @@ ## Let me have the whole observable. +--- + +:warning: `let` is no longer available, or necessary, with pipeable operators! +(RxJS 5.5+) + +--- +
### Examples @@ -109,7 +116,7 @@ const subscribe = obsArrayPlusYourOperators(addTenThenTwenty) ### Additional Resources -* [let](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md) +- [let](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md) :newspaper: - Official docs --- diff --git a/operators/utility/timeout.md b/operators/utility/timeout.md index 788713ca..814f2ce0 100644 --- a/operators/utility/timeout.md +++ b/operators/utility/timeout.md @@ -16,7 +16,8 @@ [jsFiddle](https://jsfiddle.net/btroncone/nr4e1ofy/1/) ) ```js -import { of } from 'rxjs/observable/of'; +// RxJS v6+ +import { of } from 'rxjs'; import { concatMap, timeout, catchError, delay } from 'rxjs/operators'; // simulate request diff --git a/operators/utility/topromise.md b/operators/utility/topromise.md index 0d64539f..9e9bb4b9 100644 --- a/operators/utility/topromise.md +++ b/operators/utility/topromise.md @@ -14,6 +14,7 @@ [jsFiddle](https://jsfiddle.net/btroncone/thykc9up/) ) ```js +// RxJS v6+ import { of } from 'rxjs/observable/of'; import { toPromise, delay } from 'rxjs/operators'; @@ -34,8 +35,8 @@ const example = sample('First Example') [jsFiddle](https://jsfiddle.net/btroncone/xzu6u7hs/) ) ```js -import { of } from 'rxjs/observable/of'; -import { delay } from 'rxjs/operators'; +// RxJS v6+ +import { of, delay } from 'rxjs'; //return basic observable const sample = val => of(val).pipe(delay(5000));