Trabalhando com Pipes em Angular

Pipes são ferramentas especiais que permitem formatar os valores exibidos. Por exemplo, podemos querer exibir uma data específica:

import { Component } from "@angular/core";
import { DatePipe } from "@angular/common";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [DatePipe], // importando o DatePipe
  template: `<div>Sem formatação: {{ myDate }}</div>
    <div>Com formatação: {{ myDate | date }}</div>`,
})
export class AppComponent {
  myDate = new Date(1961, 3, 12);
}

Aqui, criamos uma data que é exibida duas vezes no template. No segundo caso, a data é formatada com a ajuda da classe DatePipe. No entanto, para usar o DatePipe, é necessário importá-lo do pacote "angular/common".

Usando pipes em Angular

Pipes Integrados

O Angular oferece uma variedade de pipes integrados. Alguns dos principais são:

CurrencyPipe: formata valores monetários.
PercentPipe: formata percentuais.
UpperCasePipe: converte uma string para letras maiúsculas.
LowerCasePipe: converte uma string para letras minúsculas.
DatePipe: formata datas.
DecimalPipe: define o formato de números.
SlicePipe: corta partes de uma string.

Ao utilizar esses pipes, o sufixo "Pipe" é omitido (com exceção do DecimalPipe, que usa o nome "number" para aplicação):

import { Component } from "@angular/core";
import { UpperCasePipe, LowerCasePipe, PercentPipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [UpperCasePipe, LowerCasePipe, PercentPipe, CurrencyPipe],
  template: `<div>UpperCasePipe: {{ welcome | uppercase }}</div>
    <div>LowerCasePipe: {{ welcome | lowercase }}</div>
    <div>PercentPipe: {{ percentage | percent }}</div>
    <div>CurrencyPipe: {{ percentage | currency }}</div>`,
})
export class AppComponent {
  welcome: string = "Hello World!";
  percentage: number = 0.14;
}

Convertendo dados usando pipes em Angular

Parâmetros em Pipes

Pipes podem receber parâmetros. Por exemplo, o SlicePipe, que corta uma string, pode receber índices de início e fim da substring que será extraída:

import { Component } from "@angular/core";
import { SlicePipe } from "@angular/common";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [SlicePipe],
  template: `<div>{{ welcome | slice : 3 }}</div>
    <div>{{ welcome | slice : 6 : 11 }}</div>`,
})
export class AppComponent {
  welcome: string = "Hello World!";
}

Todos os parâmetros são passados para o pipe por meio de dois-pontos. No exemplo slice:6:11, uma substring é extraída do índice 6 ao 11. O índice inicial é obrigatório, mas o índice final é opcional. Se não for especificado, a substring vai até o fim da string.

Parâmetros em pipes em Angular

Formatando Datas

O DatePipes pode receber um modelo de data como parâmetro:

import { Component } from "@angular/core";
import { DatePipe } from "@angular/common";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [DatePipe],
  template: `<div>{{ myDate | date : "dd/MM/yyyy" }}</div>`,
})
export class AppComponent {
  myDate = Date.now();
}

Formatando Números

O DecimalPipe aceita um modelo de formato numérico como parâmetro:

import { Component } from "@angular/core";
import { DecimalPipe } from "@angular/common";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [DecimalPipe],
  template: `<div>{{ pi | number : "2.1-2" }}</div>
    <div>{{ pi | number : "3.5-5" }}</div>`,
})
export class AppComponent {
  pi: number = 3.1415;
}

O modelo segue o formato "minIntegerDigits.minFractionDigits-maxFractionDigits", onde:

minIntegerDigits: número mínimo de dígitos na parte inteira.
minFractionDigits: número mínimo de dígitos na parte decimal.
maxFractionDigits: número máximo de dígitos na parte decimal.
locale: código da localidade a ser aplicada.

Formatando números com DecimalPipe em Angular

Formatando Valores Monetários

O CurrencyPipe pode receber uma série de parâmetros:

import { Component } from "@angular/core";
import { CurrencyPipe } from "@angular/common";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [CurrencyPipe],
  template: `<div>{{ money | currency : "BRL" }}</div>
    <div>{{ money | currency : "BRL" : "code" : "1.1-1" }}</div>`,
})
export class AppComponent {
  money: number = 23.45;
}

Formatando valores monetários com CurrencyPipe em Angular

Aqui estão alguns dos parâmetros que podem ser utilizados:

currencyCode: o código da moeda, conforme a especificação ISO 4217 (padrão é USD).
display: como o símbolo da moeda será exibido. Pode ser "code" (código da moeda), "symbol" (símbolo da moeda, padrão), "symbol-narrow" (símbolo estreito), ou uma string personalizada.
digitsInfo: o formato do número, similar ao DecimalPipe.
locale: código de localidade a ser aplicado.

Combinando Pipes

É possível aplicar vários pipes a um único valor, criando uma cadeia de transformações separadas por uma barra vertical:

import { Component } from "@angular/core";
import { SlicePipe, UpperCasePipe } from "@angular/common";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [SlicePipe, UpperCasePipe],
  template: `<div>{{ message | slice : 6 : 11 | uppercase }}</div>`,
})
export class AppComponent {
  message = "Hello World!";
}