There is a price to pay for most of our actions. For every actions there is a reaction Giancarlo Esposito

Combination Operators I

• merge => Interleave events by merging streams
• concat => Preserve order of events by concatenating streams
• switchAll => Switch to the latest stream data


• combineLatest
• forkJoin
• zip
• withLatestFrom
• exhaust


• mergeAll
• concatAll
• zipAll


• race
• startWith
• combineAll

Merge Operator

            // Synchronous behaviour
            const stream1$ = rxjs.of('a', 'b', 'c')
            const stream2$ = rxjs.of(1, 2, 3)
            // equivalent [Static|Observable] method: rxjs.merge(stream1$, stream2$)
            stream1$.pipe(rxjs.operators.merge(stream2$))
    

        const clicks$ = rxjs.fromEvent(document, 'click')
            .pipe(rxjs.operators.map((ev) => ev.clientX))
        const timer$ = rxjs.interval(1000)
        // equivalent [Static|Observable] method: rxjs.merge(clicks$, timer$)
        clicks$.pipe(rxjs.operators.merge(timer$))
    

Flattens multiple Observables together by blending their values into one Observable

Concat Operator

            const stream1$ = rxjs.of('a', 'b', 'c').pipe(rxjs.operators.delay(3000))
            const stream2$ = rxjs.of(1, 2, 3)
            // equivalent [Static|Observable] method: rxjs.concat(stream1$, stream2$)
            stream1$.pipe(rxjs.operators.concat(stream2$))
        

                rxjs.concat(
                    rxjs.interval(1000),
                    rxjs.of('This', 'Never', 'Runs')
                )
                // When source never completes, the subsequent observables never runs
                // Warning: Here the second Observable is actually HOT for asynchronous data type
            

Concatenates multiple Observables together by sequentially emitting their values, one Observable after the other

switchAll Operator

        const stream1$ = rxjs.of('a', 'b', 'c')
            .pipe(rxjs.operators.delay(3000))
        const stream2$ = rxjs.of(1, 2, 3)
        stream1$.pipe(rxjs.operators.switchAll(stream2$))
    

        const clicks$ = rxjs.fromEvent(document, 'click')
            .pipe(rxjs.operators.map((ev) => rxjs.interval(1000)))
        clicks$.pipe(rxjs.operators.switchAll())
    

Flattens an Observable-of-Observables by dropping the previous inner Observable once a new one appears

Exercice

• Implement a search bar

here