Angular Academy · Les

Transformatie-operatoren

Gebruik map, switchMap, mergeMap en concatMap.

Les 1 van 413 stappen

Transformatie-operatoren is een gratis Angular Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Wat zijn operators

Operators zijn functies die je binnen .pipe() samenstelt om een stream te transformeren. Transformatie-operators wijzigen elke uitgezonden waarde of vouwen interne observables samen tot de uitvoer.

map

map transformeert elke uitgezonden waarde, net als Array.map maar dan in de loop van de tijd.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

Waarom mapping op hoger niveau

Wanneer elke waarde een andere observable activeert (bijvoorbeeld een HTTP-aanroep), krijg je een observable van observables. Operatoren voor het samenvoegen (switchMap, mergeMap, concatMap) abonneren zich op de interne observable en zenden diens waarden uit.

switchMap

switchMap annuleert de vorige interne observable wanneer een nieuwe waarde binnenkomt. Perfect voor zoekopdrachten tijdens het typen — oude verzoeken worden weggegooid.

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap (alias flatMap) voert interne observables gelijktijdig uit en voegt al hun waarden samen. Er wordt niets geannuleerd.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

concatMap zet interne observables in een wachtrij en voert ze in volgorde één voor één uit, waarbij het wacht tot elke observable is voltooid. Gebruik dit wanneer de volgorde belangrijk is.

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMap negeert nieuwe waarden zolang een interne observable nog wordt uitgevoerd. Ideaal om dubbele verzendingen bij een klik op een knop te voorkomen.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

De juiste samenvoegoperator kiezen

switchMap: vorige annuleren (zoeken).
mergeMap: alles parallel (onafhankelijke schrijfbewerkingen).
concatMap: op volgorde, één voor één (opeenvolgende opslagbewerkingen).
exhaustMap: negeren zolang bezig (aanmeldknop).

switchMap en annuleren

Omdat switchMap actieve interne observables annuleert, zegt deze ook het onderliggende HTTP-verzoek op. Angular vertaalt dit naar een afgebroken verzoek, waardoor bandbreedte wordt bespaard.

map combineren met een samenvoegoperator

Vaak gebruik je map om gegevens te extraheren nadat je observables hebt samengevoegd.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

Geneste abonnementen voorkomen

Abonneer je nooit binnen een abonnement. Gebruik in plaats daarvan een samenvoegoperator — zo blijft de pipeline declaratief en wordt het opruimen correct afgehandeld.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

Korte controle

Test je begrip van transformatie-operators.

Beantwoord dit in de interactieve les

Samenvatting: transformatie-operators

map transformeert waarden; operators voor het afvlakken verwerken interne observables.

switchMap: annuleert de vorige.
mergeMap: parallel.
concatMap: sequentieel, in volgorde.
exhaustMap: negeert waarden zolang de operator bezig is.

Volgende: filteroperators.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Transformatie-operatoren” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Transformatie-operatoren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Transformatie-operatoren”?

Gebruik map, switchMap, mergeMap en concatMap. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Transformatie-operatoren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy