Pipe custom, crearle e importarle

Se abbiamo bisogno di una trasformazione per la quale non esiste una Pipe predefinita in Angular, possiamo crearla definendo una Pipe personalizzata. Supponiamo, ad esempio, di voler visualizzare soltanto la parte iniziale di un testo con in fondo i classici puntini di sospensione per indicare che il testo continua. Possiamo definire la nostra Pipe come mostrato dal seguente codice:

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform { 
  transform(value: string, args: number = 10): string {
    let result = value; 
    if (value){
      if (value.length > args) {
        result = value.substring(0, args) + '...';
      } else {
        result = value;
      }
    } 
    return result;
  }
}

Vediamo innanzitutto che una Pipe è una classe che implementa l'interfaccia PipeTransform. Il decoratore @Pipe ci consente di associare alla nostra classe il nome che sarà utilizzato nel markup del template. Nel nostro caso abbiamo scelto di chiamare la Pipe truncate.

L'interfaccia PipeTransform prevede l'implementazione del metodo transform() che noi abbiamo definito prevedendo un argomento value obbligatorio, la stringa da troncare, ed un argomento args opzionale, il numero di caratteri che deve avere la stringa troncata. Se il secondo argomento non viene passato, gli si da 10 come valore predefinito.

L'implementazione del metodo transform() è abbastanza semplice: se la lunghezza della stringa contenuta in value è superiore al numero di caratteri specificato da args, tronchiamo la stringa ed aggiungiamo i puntini di sospensione, altrimenti restituiamo la stringa intatta.

Una volta definita la Pipe, per poterla utilizzare globalmente la includiamo nel modulo della nostra applicazione come mostrato di seguito:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
import { TruncatePipe } from './truncate.pipe'; 
@NgModule({
  imports: [
    BrowserModule,
    ...
  ],
  declarations: [
    AppComponent,
    ...
    TruncatePipe
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Quindi, d'ora in poi possiamo utilizzare la Pipe truncate per sintetizzare le stringhe all'interno dei template HTML, come mostrato nel seguente esempio:

<h3>{{articolo.titolo}}</h3>
<i>{{articolo.autore}}</i><br/>
<p>
  {{articolo.testo | truncate:25}}
</p>