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

HOME

Els tubs (pipes) a Angular són una manera senzilla de transformar dades en les plantilles. Angular proporciona diversos tubs integrats, com ara DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, entre d'altres. No obstant això, en moltes situacions, és possible que necessitis crear tubs personalitzats per satisfer necessitats específiques de la teva aplicació.

Què és un tub personalitzat?

Un tub personalitzat és una classe que implementa la interfície PipeTransform i defineix un mètode transform que conté la lògica de transformació de dades. Els tubs personalitzats es poden utilitzar en plantilles Angular de la mateixa manera que els tubs integrats.

Crear un tub personalitzat

Pas 1: Crear la classe del tub

Primer, crea un fitxer nou per al teu tub. Per exemple, custom.pipe.ts.

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

@Pipe({
  name: 'custom'
})
export class CustomPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // Lògica de transformació
    return value;
  }
}

Pas 2: Implementar la lògica de transformació

Suposem que volem crear un tub que inverteixi una cadena de text. Implementem la lògica dins del mètode transform.

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.split('').reverse().join('');
  }
}

Pas 3: Registrar el tub en un mòdul

Per utilitzar el tub en les plantilles, cal registrar-lo en un mòdul. Normalment, es fa en el mòdul principal o en un mòdul compartit.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReversePipe } from './reverse.pipe';

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

Pas 4: Utilitzar el tub en una plantilla

Ara pots utilitzar el tub en qualsevol plantilla de la teva aplicació.

<p>{{ 'Hello Angular' | reverse }}</p>

Aquest codi mostrarà: ralugnA olleH.

Exercicis pràctics

Exercici 1: Crear un tub per capitalitzar paraules

Crea un tub que capitalitzi la primera lletra de cada paraula en una cadena de text.

Solució

Crea el fitxer capitalize.pipe.ts.

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

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.replace(/\b\w/g, first => first.toLocaleUpperCase());
  }
}

Registra el tub en un mòdul.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CapitalizePipe } from './capitalize.pipe';

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

Utilitza el tub en una plantilla.

<p>{{ 'hello angular world' | capitalize }}</p>

Aquest codi mostrarà: Hello Angular World.

Exercici 2: Crear un tub per truncar text

Crea un tub que truncarà una cadena de text a una longitud específica i afegirà "..." al final si la cadena és més llarga que la longitud especificada.

Solució

Crea el fitxer truncate.pipe.ts.

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;
  }
}

Registra el tub en un mòdul.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TruncatePipe } from './truncate.pipe';

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

Utilitza el tub en una plantilla.

<p>{{ 'This is a very long text that needs to be truncated' | truncate:25 }}</p>

Aquest codi mostrarà: This is a very long text....

Resum

En aquesta secció, hem après a crear tubs personalitzats a Angular. Hem vist com implementar la interfície PipeTransform, com registrar el tub en un mòdul i com utilitzar-lo en una plantilla. També hem practicat amb alguns exercicis per reforçar els conceptes apresos. Els tubs personalitzats són una eina poderosa per transformar dades de manera senzilla i reutilitzable en les nostres aplicacions Angular.

Tubs personalitzats

Què és un tub personalitzat?

Crear un tub personalitzat

Pas 1: Crear la classe del tub

Pas 2: Implementar la lògica de transformació

Pas 3: Registrar el tub en un mòdul

Pas 4: Utilitzar el tub en una plantilla

Exercicis pràctics

Exercici 1: Crear un tub per capitalitzar paraules

Solució

Exercici 2: Crear un tub per truncar text

Solució

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

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

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques