Negli script #183 e #184 abbiamo visto come utilizzare le pipe predefinite. In questo script ci occupiamo invece di creare pipe custom che ci permettano di peronalizzare l'output di un valore in binding. Il primo passo per creare una pipe custom consiste nell'importare l'interfaccia PipeTransform.

import { Pipe, PipeTransform } from '@angular/core';

Una volta importata l'interfaccia dobbiamo creare una classe che ne implementa i metodi. PipeTransform dichiara il metodo transform che accetta in input il valore in binding e restituisce in output il valore trasformato. Una volta creata la classe, questa va decorata con il decorator Pipe per specificare il nome della pipe.

@Pipe({name: 'FirstLetterUpperCase'})
export class FirstLetterUpperCasePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
    if (!value) return value;

    return value.charAt(0).toUpperCase() + value.substr(1);
  }
}

Il primo parametro del metodo transform contiene il valore da trasformare mentre il secondo contiene la lista di eventuali parametri che servono a personalizzare ulteriorente la trasformazione. Ad esempio, nel caso di una data possiamo passare un parametro che specifica il formato della data.

Una volta creata la pipe, possiamo usarla nel binding esattamente come qualunque altra pipe.