Usein on tarpeen esittää tietoja selkeästi ja visuaalisesti miellyttävästi. Tämä voi tarkoittaa esimerkiksi nimien, päivämäärien, hintojen, prosenttien tai luettelokohteiden muotoilua.

Jos kaikki nämä muunnokset tehdään manuaalisesti komponenttilogiikassa, templatet voivat nopeasti muuttua sekaviksi ja vaikeasti hallittaviksi. Tämän ratkaisemiseksi Angular tarjoaa selkeän ja yksinkertaisen ominaisuuden nimeltä putket (pipes) — tavan muuntaa tietoa suoraan templatessa.

Mitä ovat putket?

Ajattele putkea työkaluna, joka ottaa vastaan raakadataa, käsittelee sen ja tuottaa muokatun version — vähän kuin suodatin tietovirran sisällä.

Putkien käyttäminen Angularissa

Aina kun tarvitset tietojen muotoilua suoraan templatessa, voit käyttää putkea | (pipe) -symbolilla:

{{ value | pipeName }}

Usean putken ketjuttaminen mahdollista:

{{ value | pipe1 | pipe2 }}

Jotkin putket hyväksyvät myös parametreja, jotka välitetään kaksoispisteillä (:):

{{ value | pipeName:param1:param2 }}

Angular sisältää joukon sisäänrakennettuja putkia yleisimpiin muotoilutarpeisiin — kuten numeroiden, päivämäärien, valuutan ja kirjainkoon muuntamiseen. Käydään läpi käytännön esimerkkejä, alkaen perusteista ja edeten edistyneempiin käyttötapauksiin.

Merkkijonon muuntaminen

Oletetaan, että komponentissasi on ominaisuus username. On usein hyödyllistä korostaa käyttäjän nimeä näyttämällä se kokonaan isoilla kirjaimilla.

Tässä userName-ominaisuus haetaan komponentista ja muunnetaan isoiksi kirjaimiksi Angularin sisäänrakennetulla uppercase-pipella. Jos siis userName = 'alex', sivulla näkyvä tulos on: ALEX.

Päivämäärien muotoilu

Merkkijonojen lisäksi yksi yleisimmistä muotoiltavista tietotyypeistä on päivämäärä.

Kuvittele, että sinulla on user-olio. Haluat näyttää liittymispäivän selkeässä, helposti luettavassa muodossa:

Jos user.dateJoined = new Date(2023, 3, 15), tulos olisi: Joined on: April 15, 2023.

date-putki tukee laajaa valikoimaa muotoiluja, kuten short, medium, fullDate tai jopa mukautettuja muotoiluja, esimerkiksi dd/MM/yyyy.

Valuutan näyttäminen

Käytössä on product-olio. Näyttääksesi hinnan tietyssä valuutassa, käytä currency-putkea:

Jos product.price = 199.99, tuloste on: Price: $199.99.

Voit mukauttaa valuuttaputkea alueasetuksilla, näyttötyylillä sekä määrittää, näytetäänkö valuuttasymboli.

Angularissa on käytettävissä monia muita hyödyllisiä putkia. Kaikkia ei käsitellä tässä, mutta alla on pikaopas putkista, joita ei ole vielä mainittu:

Lisätietoja jokaisesta pipestä löydät virallisesta Angular-dokumentaatiosta.