Det är ofta nödvändigt att visa data på ett tydligt och visuellt tilltalande sätt. Detta kan inkludera formatering av namn, datum, priser, procenttal eller listobjekt.

Om alla dessa transformationer hanteras manuellt i komponentlogiken kan mallarna snabbt bli röriga och svåröverskådliga. För att lösa detta erbjuder Angular en ren och enkel funktion kallad 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 hjälp av | (pipe)-symbolen:

{{ value | pipeName }}

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

{{ value | pipe1 | pipe2 }}

Vissa pipes accepterar även parametrar, som du anger med 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 ett användarnamn 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. Så om userName = 'alex', kommer resultatet på sidan att bli: 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 de gick med i ett tydligt och läsbart format:

If user.dateJoined = new Date(2023, 3, 15), the result would be: 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 lokaliseringsinstä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.