Pipes koppelen en parametriseren
Combineer pipes en geef argumenten door.
Pipes koppelen en parametriseren is een gratis Angular Academy-les op CoddyKit. Dit is les 2 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.
Argumenten doorgeven aan pipes
Pipes kunnen argumenten na een dubbele punt accepteren. De vorm is {{ value | pipeName:arg1:arg2 }}. Elk argument wordt met een eigen dubbele punt gescheiden.
Eén argument
Veel pipes accepteren één argument. De pipe date accepteert bijvoorbeeld een opmaakstring.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Meerdere argumenten
De pipe slice accepteert een begin- en eindindex, die elk met een eigen dubbele punt worden doorgegeven.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Dynamische argumenten
Argumenten kunnen componentproperties zijn en niet alleen letterlijke waarden. Zo kunt je het gedrag van een pipe reactief wijzigen.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;Wat is pipe-koppeling?
Je kunt pipes aan elkaar koppelen, zodat de uitvoer van de ene pipe de invoer van de volgende wordt. Ze worden van links naar rechts uitgevoerd.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Voorbeeld van pipe-koppeling
Hier wordt een datum opgemaakt en vervolgens omgezet naar hoofdletters. De pipe date wordt eerst uitgevoerd, gevolgd door uppercase.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->De volgorde is belangrijk
De volgorde van gekoppelde pipes verandert het resultaat. In dit voorbeeld levert uppercase vóór slice hetzelfde resultaat op als erna, maar bij pipes die waarden transformeren kan de volgorde veel verschil maken.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Argumenten en pipe-koppeling combineren
Je kunt argumenten en pipe-koppeling vrij combineren. Elke pipe ontvangt nog steeds de uitvoer van de vorige pipe als waarde.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Koppelen met currency
Maak van een getal een valutawaarde en kort die vervolgens in. Hoewel dit ongebruikelijk is, laat het zien dat pipes samenstelbare bouwstenen zijn.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Tips voor leesbaarheid
Lange pipe-ketens kunnen de leesbaarheid verminderen. Als een keten complex wordt, kun je overwegen de waarde in de component of in een aangepaste pipe te berekenen.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Witruimte rond pipes
Spaties rond | en : zijn optioneel, maar worden aanbevolen voor de leesbaarheid. Angular negeert extra witruimte.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Korte controle
Test je begrip van pipe-argumenten en pipe-koppeling.
Samenvatting
Je hebt geleerd hoe je één of meerdere argumenten met dubbele punten doorgeeft, dynamische argumenten uit componentproperties gebruikt en pipes koppelt, zodat de uitvoer van links naar rechts wordt doorgegeven.
Vervolgens bouw je je eigen aangepaste pipe.
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
Veelgestelde vragen
Is de les “Pipes koppelen en parametriseren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Pipes koppelen en parametriseren”, 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 “Pipes koppelen en parametriseren”?
Combineer pipes en geef argumenten door. 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 2 van 4.
Hoe lang duurt de les “Pipes koppelen en parametriseren”?
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
- Ingebouwde pipes gebruiken
- Pipes koppelen en parametriseren
- Aangepaste pipes maken
- Pure versus impure pipes