Ibland räcker inte de inbyggda rören i Angular till. Du kan behöva en unik transformation som är specifik för din applikation. I sådana fall kan du skapa ett eget anpassat rör.

Anta att du har en lista med uppgifter, och varje uppgift kan vara antingen slutförd eller inte. För att göra slutförda uppgifter visuellt framträdande vill du automatiskt lägga till en ✅-emoji till deras titlar. Istället för att hårdkoda denna logik i varje mall kan du skapa ett dedikerat rör för detta.

Hur man skapar ett anpassat rör

För att generera ett anpassat rör i Angular, använd följande CLI-kommando. Vi kallar det formatTitle, eftersom dess uppgift är att formatera uppgiftens titel baserat på dess slutförandestatus:

Detta kommer att skapa två filer:

• format-title.pipe.ts — rörlogiken;

• format-title.pipe.spec.ts — enhetstestfil (du kan ta bort den om du inte behöver testning just nu).

När Angular genererar pipen ser det ut ungefär så här:

Det här gör koden:

• Klassen FormatTitlePipe implementerar PipeTransform, vilket säkerställer att pipen har en transform-metod;

• transform-metoden tar emot ett värde (inmatningen) och valfria argument och returnerar ett transformerat resultat. För närvarande returneras bara inmatningen som den är;

• Pipens namn (formatTitle) definieras i @Pipe-dekorationen — det är namnet som används i mallen.

Just nu existerar pipen men gör faktiskt ingenting. Nästa steg är att lägga till den faktiska logiken.

Anpassad Pipe-implementering

Vi behöver lägga till en ✅-emoji till titeln baserat på uppgiftens slutförandestatus (task.completed). Uppdatera pipen för att tillämpa vår anpassade formateringslogik:

Metoden transform tar två argument:

• value — uppgiftens titel;

• completed — ett booleskt värde som indikerar om uppgiften är klar.

Om uppgiften är slutförd (true), läggs en ✅-emoji till i slutet av titeln. Annars returneras titeln oförändrad.

Använda pipen i en mall

För att använda pipen i din Angular-mall, applicera den med pipesymbolen |:

Vad som händer här:

• task.title är värdet som skickas till pipen;

• formatTitle:task.completed applicerar pipen och skickar in flaggan completed;

• Titeln kommer antingen att inkludera emoji-symbolen ✅ eller inte, beroende på uppgiftens status.

Att använda pipes på detta sätt hjälper till att hålla mallarna rena och läsbara, samt flyttar formateringslogik till återanvändbar och testbar kod.