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 indkode denne logik i hver enkelt skabelon, kan du oprette en dedikeret pipe til formålet.

Sådan opretter du en brugerdefineret pipe

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

Dette opretter 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:

• Klassen FormatTitlePipe 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 udfører ikke noget. Lad os tilføje den egentlige logik næste gang.

Implementering af brugerdefineret pipe

Vi skal tilføje 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 skabelon

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

Hvad der sker her:

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

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

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

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