Creare un Pipe personalizzato in Angular

In questo articolo vedremo come creare un pipe in Angular personalizzato e come organizzare il codice qualora abbiamo più pipes da noi creati.

Per creare un pipe si usa il comando ng generate

ng generate pipe < nome pipe >

Immaginiamo di voler creare un pipe per formattare la data in formato italiano cioè nel seguente formato Sabato 13 Agosto 2022, chiamiamo questo pipe datait, quindi tramite cmd lanciamo il seguente comando

ng generate pipe datait

datait è il nome che ho assegnato al pipe, verrà generato un file datait.pipe.ts simile a questo

datait.pipe.ts

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

@Pipe({
  name: 'datait'
})
export class DataitPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

facciamo in modo che questo pipe restituisca una data nel formato indicato in precedenza, quindi modifichiamo la funzione transform() come segue

datait.pipe.ts

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

@Pipe({
  name: 'datait'
})
export class DataitPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    
    const options = {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    };

    const dataIT = value.toLocaleDateString('it-IT', options);
    const objdataIT = dataIT.split(' ');
    var newdataIT = '';

    objdataIT.map((word: string) => {
      newdataIT += word.substr(0, 1).toLocaleUpperCase() + word.substr(1) + ' ';
    });

    return newdataIT;
  }

}

usiamo la funzione toLocaleDateString() per ottenere la data nella lingua Italiana ('it-IT') e settiamo il formato del mese, giorno e anno tramite l'oggetto options, poichè vogliamo le iniziali di ogni parola in maiuscolo allora tramite la funzione split() trasformiamo la stringa in array, e tramite la funzione toLocaleUpperCase() settiamo la prima lettera di ogni parola, che otteniamo tramite la funzione map(), in maiuscolo.

Il nostro pipe è pronto per l'uso, ma prima dobbiamo aggiungerlo all'oggetto declarations in app.module.ts

app.module.ts

.....................
.....................

import { DataitPipe } from './datait.pipe';

.....................
.....................

@NgModule({
  imports: [......],
  declarations: [......., DataitPipe],
  bootstrap: [......],
})

quindi per utilizzare il pipe ad esempio in app.component.html usiamo la seguente sintassi

app.component.html

<p>
  {{ today | datait }}
</p>

dove today è una variabile che contiene il valore della data attuale in app.component.ts

app.component.ts

import { Component} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  today = new Date();
}

ecco il codice completo su stackblitz.com.

Fin qui abbiamo visto come creare e utilizzare un pipe personalizzato. 

Nel caso in cui avessimo tanti pipes personalizzati allora possiamo organizzare il codice in modo diverso, cioè creando un modulo pipes.module.ts in cui importiamo tutti i nostri pipes.

Quindi tramite cmd creiamo un modulo che chiamiamo pipes

ng generate module pipes

verrà generato un file pipes.module.ts simile a questo

pipes.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [],
  exports: [],
})
export class PipesModule {}

quindi nel caso dell'esempio precedente, importiamo il pipe DataitPipe in questo modulo e aggiungiamolo sia all'oggetto exports che all'oggetto declarations, facciamo questa procedura per ogni pipe che abbiamo creato

pipes.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataitPipe } from './datait.pipe';

@NgModule({
  imports: [CommonModule],
  declarations: [DataitPipe],
  exports: [DataitPipe],
})
export class PipesModule {}

e importiamo questo modulo (PipesModule) in app.module.ts

app.module.ts

.................
import { PipesModule } from './pipes/pipes.module';

@NgModule({
  imports: [ ...... , PipesModule],

})
export class AppModule {}

l'esempio precedente funzionerà allo stesso modo, ecco il codice completo su stackblitz.com.