Vi har ofte behov for å vise data på en måte som er tydelig og visuelt tiltalende. Dette kan innebære formatering av navn, datoer, priser, prosenter eller listeelementer.

Hvis du prøver å håndtere alle disse transformasjonene manuelt i komponentlogikken, kan malene våre raskt bli rotete og uoversiktlige. For å løse dette tilbyr Angular en ryddig og enkel funksjon kalt pipes — en måte å transformere data direkte i malen.

Hva er pipes?

Tenk på en pipe som et verktøy som tar inn rådata, behandler det, og gir ut en modifisert versjon — omtrent som et filter i en datastrøm.

Bruk av pipes i Angular

Når du trenger å formatere data direkte i malen, kan du bruke en pipe ved å benytte | (pipe)-symbolet:

{{ value | pipeName }}

Det er også mulig å kjede flere pipes sammen:

{{ value | pipe1 | pipe2 }}

Noen pipes godtar også parametere, som du sender inn ved å bruke kolon (:):

{{ value | pipeName:param1:param2 }}

Angular leveres med et sett innebygde pipes for å håndtere vanlige formateringsbehov — fra tall og datoer til valuta og endring av bokstavtype. Her følger eksempler fra virkeligheten, fra grunnleggende bruk til mer avanserte tilfeller.

Strengtransformasjon

Anta at du har en egenskap username i komponenten din. Det er ofte nyttig å fremheve eller markere et brukernavn ved å vise det med store bokstaver.

Her hentes userName-egenskapen fra komponenten og transformeres til store bokstaver ved hjelp av Angulars innebygde uppercase pipe. Så hvis userName = 'alex', vil utdataen på siden være: ALEX.

Formatering av datoer

Foruten strenger er en av de vanligste datatypene du må formatere, en dato.

Tenk deg at du har et user-objekt. Du ønsker å vise datoen brukeren ble medlem på, i et ryddig og lesbart format:

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

date-røret støtter et bredt utvalg av formater, som short, medium, fullDate, eller til og med egendefinerte formater som dd/MM/yyyy.

Vise valuta

Du arbeider med et product-objekt. For å vise prisen i en bestemt valuta, bruk currency-røret:

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

Du kan tilpasse currency-pipen med lokale innstillinger, visningsstil og om du vil vise valutasymbolet eller ikke.

Det finnes mange andre nyttige piper tilgjengelig i Angular. Selv om du ikke vil dekke alle her, finner du nedenfor en hurtigreferanse over piper som ikke er nevnt ennå:

For mer informasjon om hver pipe, besøk den offisielle Angular-dokumentasjonen.