Soms zijn de ingebouwde pipes in Angular niet voldoende. Mogelijk heb je een unieke transformatie nodig die specifiek is voor jouw applicatie. In dat geval kun je je eigen custom pipe maken.

Stel, je hebt een lijst met taken en elke taak kan voltooid of niet voltooid zijn. Om voltooide taken visueel te laten opvallen, wil je automatisch een ✅-emoji aan hun titels toevoegen. In plaats van deze logica in elke template te verwerken, kun je hiervoor een speciale pipe bouwen.

Een custom pipe maken

Gebruik de volgende CLI-opdracht om een custom pipe in Angular te genereren. We noemen deze formatTitle, omdat deze de taak heeft om de titel van de taak te formatteren op basis van de voltooiingsstatus:

Hiermee worden twee bestanden aangemaakt:

• format-title.pipe.ts — de pipe-logica;

• format-title.pipe.spec.ts — een unit test-bestand (je kunt dit verwijderen als je nu geen tests nodig hebt).

Wanneer Angular de pipe genereert, ziet deze er ongeveer zo uit:

Dit doet deze code:

• De klasse FormatTitlePipe implementeert PipeTransform, wat ervoor zorgt dat de pipe een transform-methode heeft;

• De transform-methode ontvangt een waarde (de invoer) en optionele argumenten en retourneert een getransformeerd resultaat. Op dit moment retourneert deze gewoon de invoer zoals die is;

• De naam van de pipe (formatTitle) wordt gedefinieerd in de @Pipe-decorator — dat is de naam die je in de template gebruikt.

Op dit moment bestaat de pipe, maar doet deze nog niets. Laten we nu de daadwerkelijke logica toevoegen.

Implementatie van een aangepaste pipe

We moeten een ✅-emoji toevoegen aan de titel op basis van de voltooiingsstatus van de taak (task.completed). Werk de pipe bij om onze aangepaste opmaaklogica toe te passen:

De transform-methode neemt twee argumenten:

• value — de taaknaam;

• completed — een boolean die aangeeft of de taak voltooid is.

Als de taak voltooid is (true), wordt er een ✅-emoji aan het einde van de titel toegevoegd. Anders wordt de titel ongewijzigd teruggegeven.

De pipe gebruiken in een template

Om de pipe in je Angular-template te gebruiken, pas je deze toe met het pipe-symbool |:

Wat gebeurt hier:

• task.title is de waarde die aan de pipe wordt doorgegeven;

• formatTitle:task.completed past de pipe toe en geeft de completed-vlag door;

• De titel bevat al dan niet de ✅-emoji, afhankelijk van de status van de taak.

Het gebruik van pipes op deze manier houdt je templates overzichtelijk en leesbaar, en verplaatst de opmaaklogica naar herbruikbare, testbare code.