- Learn
- Guida Angular 2
- Pipe custom, crearle e importarle
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>
Se vuoi aggiornamenti su AngularJS, JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Components and Microservices in the front-end world
Matteo Figus, è Senior Software Engineer per OpenTable.com, piattaforma per la prenotazione di ristoranti, cui lavorano più di 50 ingegneri […]