Trabalhando com Pipes - 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".

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.

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