Creare una pipe personalizzata in Angular

Mattepuffo's logo
Creare una pipe personalizzata in Angular

Creare una pipe personalizzata in Angular

In Angular abbiamo le pipes che ci permettono di trasformare il testo in vari modi: formattare la data, i numeri seguendo la moneta corrente, ecc.

Ma Angular ci permette anche di creare delle pipe personalizzate.

Dalla riga di comando, a livello del modulo principale, lanciate questo comando:

$ ng g pipe ucfirst

Questo creerà in file Typescript chiamato ucfirst.pipe.ts.

Non mettete la parola pipe nel nome, in quanto lo aggiungerà il comando in automatico.

Qui dentro mettiamo una cosa del genere:

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

@Pipe({
  name: 'ucfirst'
})

export class UcfirstPipe implements PipeTransform {

  transform(value: string, ...args: unknown[]): string {
    return value.split(' ')
      .map((w: string) => ' ' + w.substr(0, 1).toLocaleUpperCase() + w.substr(1))
      .join('');
  }

}

Ricordate che la funzione transform, creata di default, deve ritornare sempre qualcosa; in questo caso ritornerà una stringa.

Qui noi spezziamo la stinga passata come argomento agli spazi, e rendiamo la parima lettera di ogni parola in maiuscolo.

A questo punto nella pagina:

{{'ciao come stai' | ucfirst}}

Ovviamente potete creare pipe per ogni genere.

Enjoy!


Share this Post

Commentami!