Vi behöver ofta visa data på ett tydligt och visuellt tilltalande sätt. Detta kan inkludera formatering av namn, datum, priser, procenttal eller listobjekt.

Om du försöker hantera alla dessa transformationer manuellt i komponentlogiken kan våra mallar snabbt bli röriga och svåröverskådliga. För att lösa detta erbjuder Angular en ren och enkel funktion som kallas pipes — ett sätt att transformera data direkt i mallen.

Vad är Pipes?

Tänk på en pipe som ett verktyg som tar in rådata, bearbetar den och ger ut en modifierad version — ungefär som ett filter i en dataström.

Använda pipes i Angular

När du behöver formatera data direkt i mallen kan du använda en pipe med | (pipe)-symbolen:

{{ value | pipeName }}

Det är även möjligt att kedja flera pipes tillsammans:

{{ value | pipe1 | pipe2 }}

Vissa pipes accepterar även parametrar, som du skickar med hjälp av kolon (:):

{{ value | pipeName:param1:param2 }}

Angular levereras med en uppsättning inbyggda pipes för att hantera vanliga formateringsbehov — från tal och datum till valuta och textomvandlingar. Vi går igenom verkliga exempel, från grunderna till mer avancerade användningsområden.

Strängtransformering

Anta att du har en egenskap username i din komponent. Det är ofta användbart att framhäva eller betona en användares namn genom att visa det med enbart versaler.

Här hämtas egenskapen userName från komponenten och omvandlas till versaler med Angulars inbyggda uppercase-pipe. Om userName = 'alex', kommer resultatet på sidan att vara: ALEX.

Formatera datum

Förutom strängar är ett av de vanligaste datatyperna du behöver formatera ett datum.

Föreställ dig att du har ett user-objekt. Du vill visa datumet då användaren gick med i ett tydligt och läsbart format:

Om user.dateJoined = new Date(2023, 3, 15), skulle resultatet vara: Joined on: April 15, 2023.

date-pipen stöder ett brett utbud av format, såsom short, medium, fullDate eller till och med anpassade format som dd/MM/yyyy.

Visa valuta

Du arbetar med ett product-objekt. För att visa priset i en specifik valuta, använd currency-pipen:

Om product.price = 199.99, kommer utdata att vara: Price: $199.99.

Du kan anpassa currency-pipen med lokalinställningar, visningsstil och om valutasymbolen ska visas eller inte.

Det finns många andra användbara pipes tillgängliga i Angular. Även om du inte kommer att gå igenom alla här, finns nedan en snabb referenslista över pipes som ännu inte nämnts:

För att lära dig mer om varje pipe, besök den officiella Angular-dokumentationen.