Vi har ofte behov for at vise data på en måde, der er tydelig og visuelt tiltalende. Dette kan omfatte formatering af navne, datoer, priser, procenter eller listeelementer.

Hvis du forsøger at håndtere alle disse transformationer manuelt i komponentens logik, kan vores skabeloner hurtigt blive rodede og uoverskuelige. For at løse dette tilbyder Angular en enkel og overskuelig funktion kaldet pipes — en metode til at transformere data direkte i skabelonen.

Hvad er Pipes?

Tænk på en pipe som et værktøj, der tager rå data ind, behandler dem og giver en modificeret version ud — lidt ligesom et filter i en datastrøm.

Brug af pipes i Angular

Når du har brug for at formatere data direkte i skabelonen, kan du anvende en pipe ved at bruge | (pipe)-symbolet:

{{ value | pipeName }}

Det er også muligt at kæde flere pipes sammen:

{{ value | pipe1 | pipe2 }}

Nogle pipes accepterer også parametre, som du angiver ved hjælp af kolon (:):

{{ value | pipeName:param1:param2 }}

Angular leveres med et sæt indbyggede pipes til at håndtere almindelige formateringsbehov — fra tal og datoer til valuta og store/små bogstaver. Vi gennemgår eksempler fra virkeligheden, begyndende med det grundlæggende og bevæger os videre til mere avancerede anvendelser.

Strengtransformation

Antag, at du har en egenskab username i din komponent. Det er ofte nyttigt at fremhæve eller understrege et brugernavn ved at vise det med store bogstaver.

Her hentes userName-egenskaben fra komponenten og omdannes til store bogstaver ved hjælp af Angulars indbyggede uppercase pipe. Så hvis userName = 'alex', vil outputtet på siden være: ALEX.

Formatering af datoer

Udover strenge er en af de mest almindelige datatyper, du skal formatere, en dato.

Forestil dig, at du har et user-objekt. Du vil vise datoen for, hvornår brugeren tilmeldte sig, i et klart og læsbart format:

Hvis user.dateJoined = new Date(2023, 3, 15), vil resultatet være: Joined on: April 15, 2023.

date-pipen understøtter en bred vifte af formater, såsom short, medium, fullDate eller endda brugerdefinerede formater som dd/MM/yyyy.

Visning af valuta

Du arbejder med et product-objekt. For at vise prisen i en bestemt valuta, brug currency-pipen:

Hvis product.price = 199.99, vil output være: Price: $199.99.

Du kan tilpasse currency-pipen med lokalitetsindstillinger, visningsstil og om valutasymbolet skal vises eller ej.

Der findes mange andre nyttige pipes i Angular. Selvom du ikke gennemgår dem alle her, finder du nedenfor en hurtig referenceliste over pipes, der endnu ikke er nævnt:

For at lære mere om hver pipe, besøg den officielle Angular dokumentation.