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:
- Subscribe to both a source and notifier observables
- When a new value arrives from a source observable, send it to the observer
- If the notifier observable emits a value, unsubscribe from both observables, send the complete notification to the observer
- Once the source observable completes, send the complete notification to the observer
- If the source observable throws an error, send the error notification to the observer
The following diagram demonstrates this sequence of steps:
UsageLink 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:
<>Copyconst 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); }