We moeten gegevens vaak op een duidelijke en visueel aantrekkelijke manier weergeven. 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 eenvoudige en overzichtelijke 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 je data direct in de template wilt formatteren, kun je een pipe toepassen met het | (pipe) symbool:

{{ value | pipeName }}

Het is zelfs mogelijk om meerdere pipes aan elkaar te koppelen:

{{ value | pipe1 | pipe2 }}

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

{{ value | pipeName:param1:param2 }}

Angular bevat een reeks ingebouwde pipes voor veelvoorkomende opmaakbehoeften — van getallen en datums tot valuta en hoofdlettergebruik. We bekijken 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 de naam van een gebruiker 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 hebt een user-object. Je wilt de datum waarop deze persoon zich heeft aangemeld weergeven in een duidelijke, leesbare notatie:

Als user.dateJoined = new Date(2023, 3, 15), zou het resultaat zijn: 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 getoond.

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.