We moeten vaak gegevens weergeven op een manier die duidelijk en visueel aantrekkelijk is. Dit kan het opmaken van namen, datums, prijzen, percentages of lijstitems omvatten.

Als je al deze transformaties handmatig in de componentlogica probeert af te handelen, kunnen onze templates snel rommelig en onoverzichtelijk worden. Om dit op te lossen, biedt Angular een overzichtelijke en eenvoudige functie genaamd pipes — een manier om gegevens direct in de template te transformeren.

Wat zijn Pipes?

Beschouw een pipe als een hulpmiddel dat ruwe data ontvangt, deze verwerkt en een aangepaste versie oplevert — vergelijkbaar met een filter in een datastroom.

Pipes gebruiken in Angular

Wanneer het nodig is om data direct in de template te formatteren, kan een pipe worden toegepast met het | (pipe) symbool:

{{ value | pipeName }}

Het is zelfs mogelijk om meerdere pipes achter elkaar te schakelen:

{{ value | pipe1 | pipe2 }}

Sommige pipes accepteren ook parameters, die je doorgeeft met behulp van dubbele punten (:):

{{ value | pipeName:param1:param2 }}

Angular wordt geleverd met een reeks ingebouwde pipes voor veelvoorkomende opmaakbehoeften — van getallen en datums tot valuta en hoofdlettergebruik. We behandelen praktijkvoorbeelden, beginnend bij de basis en vervolgens meer geavanceerde toepassingen.

Stringtransformatie

Stel, je hebt een eigenschap username in je component. Het is vaak handig om een gebruikersnaam te benadrukken door deze in hoofdletters weer te geven.

Hier wordt de eigenschap userName uit de component gehaald en omgezet naar hoofdletters met behulp van Angular's ingebouwde uppercase pipe. Dus als userName = 'alex', zal de uitvoer op de pagina zijn: ALEX.

Datums formatteren

Naast strings is een van de meest voorkomende gegevenstypen die je moet formatteren een datum.

Stel je voor dat je een user-object hebt. Je wilt de datum waarop deze persoon zich heeft aangemeld tonen in een duidelijke, leesbare notatie:

Als user.dateJoined = new Date(2023, 3, 15), dan is het resultaat: Joined on: April 15, 2023.

De date pipe ondersteunt een breed scala aan formaten, zoals short, medium, fullDate of zelfs aangepaste formaten zoals dd/MM/yyyy.

Valuta weergeven

Je werkt met een product object. Om de prijs in een specifieke valuta weer te geven, gebruik je de currency pipe:

Als product.price = 199.99, zal de uitvoer zijn: Price: $199.99.

Je kunt de currency pipe aanpassen met lokale instellingen, weergavestijl en of het valutasymbool wel of niet wordt weergegeven.

Er zijn veel andere nuttige pipes beschikbaar in Angular. Hoewel je ze hier niet allemaal behandelt, vind je hieronder een beknopte referentielijst van pipes die nog niet zijn genoemd:

Voor meer informatie over elke pipe, bezoek de officiële Angular documentatie.