Usein meidän täytyy esittää tietoja selkeästi ja visuaalisesti miellyttävästi. Tämä voi sisältää esimerkiksi nimien, päivämäärien, hintojen, prosenttien tai luettelokohteiden muotoilun.

Jos yrität käsitellä kaikki nämä muunnokset 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ö Angularissa

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

{{ value | pipeName }}

Voit myös ketjuttaa useita putkia yhteen:

{{ 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 tai painottaa 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-putkella. 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ä ja 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, kuten dd/MM/yyyy.

Valuutan näyttäminen

Käytössäsi 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ä ja valitsemalla 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.