Skip to content
filtering

takeUntil

Emits values from the source Observable until a notifier Observable emits, then completes — the primary tool for preventing memory leaks.

Signature

takeUntil<T>(notifier: ObservableInput<any>): MonoTypeOperatorFunction<T>

Marble Diagram

source:   --1--2--3--4--5--|
notifier: -----------n-----|
takeUntil(notifier)
result:   --1--2--3--|

Example

import { interval, Subject } from 'rxjs'
import { takeUntil } from 'rxjs/operators'

const destroy$ = new Subject<void>()

interval(1000).pipe(
  takeUntil(destroy$)
).subscribe(console.log)

// In Vue: onUnmounted(() => destroy$.next())
// Subscription auto-cancels when component unmounts

Common Use Cases

  • Unsubscribe from streams when a Vue/Angular component is destroyed
  • Stop polling when a user navigates away from a page
  • Cancel a long-running operation on user request

Flow Diagram