El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a crear i utilitzar pipes personalitzats en Angular. Les pipes són una manera senzilla de transformar dades en les plantilles. Angular proporciona diverses pipes integrades, però sovint necessitem crear pipes personalitzats per satisfer necessitats específiques de l'aplicació.

Què és una pipe?

Una pipe és una funció que pren un valor d'entrada, el transforma i retorna un valor de sortida. Les pipes es poden utilitzar en plantilles Angular per formatar dades de manera senzilla.

Creació d'una pipe personalitzada

Pas 1: Crear la classe de la pipe

Per crear una pipe personalitzada, primer hem de definir una classe que implementi la interfície PipeTransform. Aquesta interfície requereix que implementem el mètode transform.

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

@Pipe({
  name: 'exemplePipe'
})
export class ExemplePipe implements PipeTransform {
  transform(value: string, ...args: any[]): string {
    // Transformació de dades
    return value.toUpperCase();
  }
}

Pas 2: Registrar la pipe en un mòdul

Després de crear la classe de la pipe, hem de registrar-la en un mòdul perquè Angular la reconegui. Normalment, la registrem en el mòdul principal o en un mòdul compartit.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExemplePipe } from './exemple.pipe';

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

Pas 3: Utilitzar la pipe en una plantilla

Un cop registrada, podem utilitzar la pipe en qualsevol plantilla del mòdul on està registrada.

<p>{{ 'hola món' | exemplePipe }}</p>

Aquest codi mostrarà "HOLA MÓN" a la pàgina, ja que la pipe exemplePipe transforma el text a majúscules.

Exemple pràctic: Pipe de format de moneda

Suposem que volem crear una pipe que formategi un número com a moneda. Aquí teniu un exemple de com fer-ho:

Pas 1: Crear la classe de la pipe

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

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: number, currencySymbol: string = '$'): string {
    if (!value) {
      return '';
    }
    return currencySymbol + value.toFixed(2);
  }
}

Pas 2: Registrar la pipe en un mòdul

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CurrencyFormatPipe } from './currency-format.pipe';

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

Pas 3: Utilitzar la pipe en una plantilla

<p>{{ 1234.56 | currencyFormat:'€' }}</p>

Aquest codi mostrarà "€1234.56" a la pàgina.

Exercicis pràctics

Exercici 1: Pipe de format de data personalitzada

Crea una pipe que formategi una data en el format "DD/MM/YYYY".

Solució

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

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {
  transform(value: Date): string {
    if (!value) {
      return '';
    }
    const day = value.getDate().toString().padStart(2, '0');
    const month = (value.getMonth() + 1).toString().padStart(2, '0');
    const year = value.getFullYear();
    return `${day}/${month}/${year}`;
  }
}

Exercici 2: Pipe de truncament de text

Crea una pipe que truncqui un text a una longitud específica i afegeixi "..." al final si el text és més llarg que la longitud especificada.

Solució

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

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) {
      return '';
    }
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

Resum

En aquest tema, hem après a crear pipes personalitzats en Angular. Les pipes són una manera poderosa de transformar dades en les plantilles. Hem vist com crear una pipe, registrar-la en un mòdul i utilitzar-la en una plantilla. També hem practicat amb alguns exemples pràctics per reforçar els conceptes apresos.

Pipes personalitzats

Què és una pipe?

Creació d'una pipe personalitzada

Pas 1: Crear la classe de la pipe

Pas 2: Registrar la pipe en un mòdul

Pas 3: Utilitzar la pipe en una plantilla

Exemple pràctic: Pipe de format de moneda

Pas 1: Crear la classe de la pipe

Pas 2: Registrar la pipe en un mòdul

Pas 3: Utilitzar la pipe en una plantilla

Exercicis pràctics

Exercici 1: Pipe de format de data personalitzada

Solució

Exercici 2: Pipe de truncament de text

Solució

Resum

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques