El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Pipes integrats

Següent ►
►

En aquest tema, explorarem els pipes integrats en Angular. Els pipes són una característica poderosa que permet transformar dades en les plantilles de manera senzilla i eficient. Angular proporciona una sèrie de pipes integrats que cobreixen les necessitats més comunes de transformació de dades.

Què és un pipe?

Un pipe és una funció que pren un valor d'entrada, el transforma i retorna un valor de sortida. Els pipes s'utilitzen en les plantilles Angular per formatar dades de manera senzilla. La sintaxi bàsica per utilitzar un pipe és la següent:

{{ valor | nomDelPipe }}

Pipes integrats comuns

  1. DatePipe

El DatePipe s'utilitza per formatar dates. Permet especificar diferents formats de data segons les necessitats.

Exemple:

<p>Data actual: {{ avui | date }}</p>
<p>Data amb format: {{ avui | date:'dd/MM/yyyy' }}</p>

Explicació:

  • avui és una variable que conté una data.
  • date és el nom del pipe.
  • 'dd/MM/yyyy' és un format de data personalitzat.

  1. UpperCasePipe i LowerCasePipe

Aquests pipes s'utilitzen per convertir cadenes de text a majúscules (UpperCasePipe) o minúscules (LowerCasePipe).

Exemple:

<p>Text en majúscules: {{ text | uppercase }}</p>
<p>Text en minúscules: {{ text | lowercase }}</p>

Explicació:

  • text és una variable que conté una cadena de text.
  • uppercase i lowercase són els noms dels pipes.

  1. CurrencyPipe

El CurrencyPipe s'utilitza per formatar valors numèrics com a monedes.

Exemple:

<p>Preu: {{ preu | currency:'EUR' }}</p>
<p>Preu amb decimals: {{ preu | currency:'EUR':'symbol':'1.2-2' }}</p>

Explicació:

  • preu és una variable que conté un valor numèric.
  • currency és el nom del pipe.
  • 'EUR' especifica la moneda (Euro).
  • 'symbol' indica que es mostrarà el símbol de la moneda.
  • '1.2-2' especifica el format de decimals (mínim 1, màxim 2).

  1. DecimalPipe

El DecimalPipe s'utilitza per formatar valors numèrics amb decimals.

Exemple:

<p>Valor: {{ valor | number:'1.0-2' }}</p>

Explicació:

  • valor és una variable que conté un valor numèric.
  • number és el nom del pipe.
  • '1.0-2' especifica el format de decimals (mínim 1, màxim 2).

  1. PercentPipe

El PercentPipe s'utilitza per formatar valors numèrics com a percentatges.

Exemple:

<p>Percentatge: {{ percentatge | percent }}</p>
<p>Percentatge amb decimals: {{ percentatge | percent:'1.1-2' }}</p>

Explicació:

  • percentatge és una variable que conté un valor numèric.
  • percent és el nom del pipe.
  • '1.1-2' especifica el format de decimals (mínim 1, màxim 2).

  1. JsonPipe

El JsonPipe s'utilitza per convertir un objecte o una matriu en una cadena JSON.

Exemple:

<p>Dades JSON: {{ dades | json }}</p>

Explicació:

  • dades és una variable que conté un objecte o una matriu.
  • json és el nom del pipe.

Exercicis pràctics

Exercici 1: Format de data

Crea una plantilla que mostri la data actual en diferents formats utilitzant el DatePipe.

Solució:

<p>Data actual: {{ avui | date }}</p>
<p>Data amb format curt: {{ avui | date:'short' }}</p>
<p>Data amb format llarg: {{ avui | date:'fullDate' }}</p>
<p>Data personalitzada: {{ avui | date:'dd/MM/yyyy' }}</p>

Exercici 2: Format de moneda

Crea una plantilla que mostri un preu en diferents formats de moneda utilitzant el CurrencyPipe.

Solució:

<p>Preu: {{ preu | currency:'USD' }}</p>
<p>Preu en euros: {{ preu | currency:'EUR' }}</p>
<p>Preu amb decimals: {{ preu | currency:'USD':'symbol':'1.2-2' }}</p>

Exercici 3: Format de percentatge

Crea una plantilla que mostri un valor com a percentatge utilitzant el PercentPipe.

Solució:

<p>Percentatge: {{ percentatge | percent }}</p>
<p>Percentatge amb decimals: {{ percentatge | percent:'1.1-2' }}</p>

Resum

En aquest tema, hem après sobre els pipes integrats en Angular i com utilitzar-los per transformar dades en les plantilles. Hem vist exemples pràctics de DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe i JsonPipe. Aquests pipes ens permeten formatar dades de manera senzilla i eficient, millorant la presentació de la informació en les nostres aplicacions Angular.

En el següent tema, explorarem com crear pipes personalitzats per cobrir necessitats específiques de transformació de dades.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats