withLatestFrom - Combineer laatste waarde bij emissie van hoofdstream

De withLatestFrom operator elke keer dat een waarde in de hoofdstream wordt geëmitteerd, combineert de laatste waarde van een andere stream en geeft deze uit.

🔰 Basissyntax en gebruik

import { interval, fromEvent } from 'rxjs';
import { withLatestFrom, map, take } from 'rxjs';

const clicks$ = fromEvent(document, 'click');
const timer$ = interval(1000);

clicks$
  .pipe(
    withLatestFrom(timer$),
    map(([click, timerValue]) => `Teller op kliktijd: ${timerValue}`)
  )
  .subscribe(console.log);

// Output:
// Teller op kliktijd: 1
// Teller op kliktijd: 2
// Teller op kliktijd: 2
// Teller op kliktijd: 5

• De hoofd-Observable (in dit geval, klikken) fungeert als trigger,
• De laatste waarde van de sub-Observable (in dit geval, teller) wordt gecombineerd en elke keer uitgegeven.

🌐 RxJS Officiële Documentatie - withLatestFrom

💡 Typische gebruikspatronen

• Laatste status ophalen bij gebruikersactie
• Gecachete data raadplegen bij verzoektijd
• Event-getriggerde databinding

🧠 Praktisch codevoorbeeld (met UI)

Voorbeeld van het ophalen en weergeven van de laatste waarde van een invoerveld elke 2 seconden.

import { fromEvent, interval } from 'rxjs';
import { map, startWith, withLatestFrom } from 'rxjs';

const title = document.createElement('h3');
title.innerHTML = 'withLatestFrom: Haal Laatste Invoer Elke 2 Seconden:';
document.body.appendChild(title);

// Maak invoerveld
const nameInput = document.createElement('input');
nameInput.placeholder = 'Voer naam in';
document.body.appendChild(nameInput);

// Maak uitvoergebied
const output = document.createElement('div');
document.body.appendChild(output);

// Invoer Observable
const name$ = fromEvent(nameInput, 'input').pipe(
  map((e) => (e.target as HTMLInputElement).value),
  startWith('') // Begin met lege string
);

// Timer (vuurt elke 2 seconden)
const timer$ = interval(2000);

// Haal laatste invoerwaarde elke keer dat timer vuurt
timer$.pipe(withLatestFrom(name$)).subscribe(([_, name]) => {
  const item = document.createElement('div');
  item.textContent = `2-seconden ophalen: Naam: ${name}`;
  output.prepend(item);
});

• Terwijl de gebruiker doorgaat met typen,
• Wordt de laatste invoer opgehaald en weergegeven elke 2 seconden.