Nogle gange er de indbyggede pipes i Angular ikke tilstrækkelige. Du kan have brug for en unik transformation, der er specifik for din applikation. I sådanne tilfælde kan du oprette din egen brugerdefinerede pipe.

Forestil dig, at du har en liste over opgaver, hvor hver opgave enten kan være fuldført eller ej. For at gøre fuldførte opgaver mere synlige, ønsker du automatisk at tilføje et ✅-emoji til deres titler. I stedet for at indarbejde denne logik i hver enkelt skabelon, kan du oprette en dedikeret pipe til formålet.

Sådan oprettes en brugerdefineret pipe

For at generere en brugerdefineret pipe i Angular, anvend følgende CLI-kommando. Vi kalder den formatTitle, da dens funktion er at formatere opgavetitlen baseret på dens fuldførelsesstatus:

Dette vil oprette to filer:

• format-title.pipe.ts — pipe-logikken;

• format-title.pipe.spec.ts — en enhedstestfil (du kan slette den, hvis du ikke har brug for test lige nu).

Når Angular genererer pipen, ser det nogenlunde sådan ud:

Dette gør koden:

• FormatTitlePipe-klassen implementerer PipeTransform, hvilket sikrer, at pipen har en transform-metode;

• transform-metoden modtager en værdi (input) og valgfrie argumenter og returnerer et transformeret resultat. På nuværende tidspunkt returnerer den blot inputtet uændret;

• Pipens navn (formatTitle) er defineret i @Pipe-dekorationen — det er navnet, du bruger i skabelonen.

Lige nu eksisterer pipen, men den gør faktisk ikke noget endnu. Lad os tilføje den egentlige logik næste gang.

Implementering af brugerdefineret pipe

Der skal tilføjes en ✅ emoji til titlen baseret på opgavens fuldførelsesstatus (task.completed). Opdater pipen for at anvende vores brugerdefinerede formateringslogik:

Metoden transform tager to argumenter:

• value — opgavens titel;

• completed — en boolesk værdi, der angiver, om opgaven er fuldført.

Hvis opgaven er fuldført (true), tilføjes en ✅ emoji til slutningen af titlen. Ellers returneres titlen uændret.

Brug af pipen i en template

For at bruge pipen i din Angular-template, anvend den med pipesymbolet |:

Forklaring af processen:

• task.title er værdien, der sendes til pipen;

• formatTitle:task.completed anvender pipen og sender completed-flaget;

• Titlen vil enten inkludere emoji'en ✅ eller ej, afhængigt af opgavens status.

Brug af pipes på denne måde hjælper med at holde dine templates rene og læsbare, og flytter formateringslogikken til genanvendelig, testbar kode.