Frequentemente, é necessário exibir dados de forma clara e visualmente atraente. Isso pode incluir a formatação de nomes, datas, preços, percentuais ou itens de listas.

Se todas essas transformações forem feitas manualmente na lógica do componente, os templates podem rapidamente ficar desorganizados e difíceis de manter. Para resolver esse problema, o Angular oferece um recurso simples e eficiente chamado pipes — uma maneira de transformar dados diretamente no template.

O que são Pipes?

Pense em um pipe como uma ferramenta que recebe dados brutos, processa-os e gera uma versão modificada — semelhante a um filtro em um fluxo de dados.

Utilizando Pipes no Angular

Sempre que for necessário formatar dados diretamente no template, é possível aplicar um pipe utilizando o símbolo | (pipe):

{{ value | pipeName }}

É possível também encadear vários pipes:

{{ value | pipe1 | pipe2 }}

Alguns pipes também aceitam parâmetros, que você passa usando dois-pontos (:):

{{ value | pipeName:param1:param2 }}

O Angular oferece um conjunto de pipes integrados para lidar com necessidades comuns de formatação — desde números e datas até moeda e transformações de caixa. Veja exemplos práticos, começando pelo básico e avançando para casos de uso mais avançados.

Transformação de Strings

Suponha que você tenha uma propriedade username em seu componente. Muitas vezes, é útil destacar ou enfatizar o nome de um usuário exibindo-o em letras maiúsculas.

Aqui, a propriedade userName é obtida do componente e transformada para letras maiúsculas utilizando o pipe uppercase integrado do Angular. Portanto, se userName = 'alex', a saída na página será: ALEX.

Formatação de Datas

Além de strings, um dos tipos de dados mais comuns que você precisará formatar é uma data.

Imagine que você tem um objeto user. Você deseja exibir a data em que ele se cadastrou em um formato limpo e legível:

Se user.dateJoined = new Date(2023, 3, 15), o resultado seria: Joined on: April 15, 2023.

O pipe date oferece suporte a uma ampla variedade de formatos, como short, medium, fullDate ou até mesmo formatos personalizados, como dd/MM/yyyy.

Exibição de Moeda

Você está trabalhando com um objeto product. Para exibir o preço em uma moeda específica, utilize o pipe currency:

Se product.price = 199.99, a saída será: Price: $199.99.

É possível personalizar o pipe de moeda com configurações de localidade, estilo de exibição e a opção de mostrar ou não o símbolo da moeda.

Existem muitos outros pipes úteis disponíveis no Angular. Embora nem todos sejam abordados aqui, abaixo está uma lista de referência rápida de pipes ainda não mencionados:

Para saber mais sobre cada pipe, visite a documentação oficial do Angular.