Reference

RxJS

    RxJS

    takeUntil

    takeUntil passes values from the source observable to the observer (mirroring) until a provided observable known as the notifier emits its first value. The operator subscribes to the source observable and begins mirroring the source Observable. It also subscribes to the notifier observable. If the notifier emits a value, takeUntil unsubscribes from the source and notifier observables and completes. If the notifier doesn't emit any value and completes then takeUntil will pass all values.

    Note, that if you only need to take a specific number of values from the source observable, you should use take operator.

    The operator works in the following way:

    1. Subscribe to both a source and notifier observables
    2. When a new value arrives from a source observable, send it to the observer
    3. If the notifier observable emits a value, unsubscribe from both observables, send the complete notification to the observer
    4. Once the source observable completes, send the complete notification to the observer
    5. If the source observable throws an error, send the error notification to the observer

    The following diagram demonstrates this sequence of steps:

    Progress: NaN%

    Usage
    Link to this section

    takeUntil is mostly used to avoid memory leaks and clear resources once a certain even happens. In a component based application, takeUntil can be triggered by the event of a component destruction through a notifier observable. This notifier observable is commonly implemented as a Subject.

    Here’s an example that demonstrates this logic:

    <>Copy
    const stream = interval(1000); function component(source) { const notifier = new Subject(); source.pipe( takeUntil(notifier) ).subscribe(render); return () => { notifier.next(null); }; } const destroy = component(stream); setTimeout(destroy, 3000); function render(v) { const text = document.createTextNode(v); document.body.appendChild(text); }

    Playground
    Link to this section

    Additional resources
    Link to this section

    See also
    Link to this section

    Next

    Introduction