Operadores: takeUntil

☑️ El operador takeUntil nos ayuda a completar un observable si otro observable ha emitido un valor.

Operador TakeUntil

el operador takeUntil en RxJS te permite controlar el flujo de eventos y detenerlo cuando se produce un evento en particular.

<aside>
<img src=“https://static.platzi.com/media/achievements/piezas-programacion-reactiva-rxjs_badge-92561658-fc14-4ef2-9372-13fc9ae9f8f3.png” alt=“https://static.platzi.com/media/achievements/piezas-programacion-reactiva-rxjs_badge-92561658-fc14-4ef2-9372-13fc9ae9f8f3.png” width=“40px” /> Es como si estuvieras jugando al fútbol y tuvieras que parar cuando escuchas el silbato del árbitro.

</aside>

Imagínate que estás jugando con tus amigos en el parque y tienes una pelota de fútbol. El operador takeUntil es como si alguien te dijera: “Deja de jugar cuando llegue la señal”. La señal puede ser cualquier cosa que te indique que debes parar de jugar, como el sonido de un silbato.

import { fromEvent } from "rxjs";
import { takeUntil } from "rxjs/operators";

const onMouseMove$ = fromEvent(document, "mousemove");
const onMouseDown$ = fromEvent(document, "mousedown");

// A través de takeUntil() definimos que cada vez que un evento es enviado por onMouseDown$
// el observable sourceCompleted$ será completado. Y por consiguiente no emitirá más valores (línea 15).
const sourceCompleted$ = onMouseMove$.pipe(takeUntil(onMouseDown$));
sourceCompleted$.subscribe(console.log);