Vi trenger ofte å vise data på en måte som er tydelig og visuelt tiltalende. Dette kan inkludere 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 dem, 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 med | (pipe)-symbolet:

{{ value | pipeName }}

Det er også mulig å kjede flere pipes sammen:

{{ value | pipe1 | pipe2 }}

Noen rør aksepterer også parametere, som du sender inn ved å bruke kolon (:):

{{ value | pipeName:param1:param2 }}

Angular leveres med et sett innebygde rør for å håndtere vanlige formateringsbehov — fra tall og datoer til valuta og endring av bokstavtype. Vi skal se på eksempler fra virkeligheten, fra det grunnleggende til mer avanserte bruksområder.

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 resultatet 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 de 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 utdata 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 dekker alle her, finner du nedenfor en hurtigreferanse over piper som ikke er nevnt tidligere:

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