2d:null 2e:["$","title",null,{"children":"RxJS Merge Strategies | Chris Camargo | Observable"}] 33:T529,doc1 = md` ## \`map()\`, \`mergeAll()\`, and \`mergeMap()\` This example uses the \`map\`, \`mergeAll\`, and \`mergeMap\` operators to map over button clicks to animate a ball drop. If you check the console after clicking "\`Drop Ball via mergeAll\`" you should see the observable returned by \`addBall\` via the \`map\`. This means we have an outer observable of inner observables. In order to get the value of the inner observable returned by \`addBall\` we need to subscribe to it and merge it's values back into the outer observable. This is precisely what \`mergeAll\` accomplishes. Convince yourself that you can press either button many times and balls will animate as quick as you can press the button. This is because \`mergeAll\` and \`mergeMap\` allow for multiple inner subscriptions to be active at the same time. As soon as the button is clicked the inner observable is subscribed to and merged with the outer observable stream. Note that \`mergeAll\` and \`mergeMap\` are "non-lossy", meaning that we don't ever drop old inner observable subscriptions once a new inner observable subscription occurs. All inner observable subscriptions are allowed to complete even if we get new inner observable subscriptions. To be more concise we can just use \`mergeMap\` instead of both \`map\` and \`mergeAll\`. `34:[] 31:{"id":"8ab3dc2ce6d79029","slug":"rxjs-merge-strategies","title":"RxJS Merge Strategies","thumbnail":"f8811647f93255ed97b1e648b299408717f9ebeaefc4ea2731ad7b29140a4d9c","access_level":"public","create_time":"$D2018-03-11T22:35:00.099Z","update_time":"$D2019-05-09T23:50:30.197Z","view_time":null,"first_public_time":"$D2018-03-12T01:47:28.127Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"48d233b7a3d2901d","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":"starter_2024"},"version":448,"publish_version":448,"role":null,"authored":false,"authors":[{"type":"individual","id":"af04b88bb8b24360","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":null}],"members":[{"type":"individual","id":"af04b88bb8b24360","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"RxJS Merge Strategies","cells":[{"id":0,"value":"md`# RxJS Merge Strategies\nThese are my notes on [RxJS](http://reactivex.io/rxjs/) merge strategies from [RX Workshop](https://www.rxworkshop.com/). This notebook is designed to give you a more intuitive understanding of \\`mergeAll\\`, \\`mergeMap\\`, \\`concatAll\\`, \\`concatMap\\`, \\`switchMap\\`, and \\`exhaustMap\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"view1 = html`\n

\n \t\n\t \n

\n\n

\n \t\n\t \n

\n\n

\n \t\n

\n\n

\n \t\n

\n\n